ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
Check
in English

ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି

ବିପରୀତ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ସହିତ ଏକ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ସେଟ୍ କରନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ସମୀକ୍ଷା

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ସହାୟକମାନେ ଗୋଟିଏ ଶ୍ରେଣୀରେ ଆମର .text-*ଉପଯୋଗୀତା ଏବଂ .bg-*ଉପଯୋଗିତାଗୁଡ଼ିକର ଶକ୍ତି ଏକତ୍ର କରନ୍ତି | ଆମର ସାସ୍ color-contrast()ଫଙ୍କସନ୍ ବ୍ୟବହାର କରି, ଆମେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ colorଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପାଇଁ ଏକ ବିପରୀତ ନିର୍ଣ୍ଣୟ କରୁ background-color|

ମୁଣ୍ଡ ଉପରକୁ! ବର୍ତ୍ତମାନ ଏକ CSS- ଦେଶୀ color-contrastକାର୍ଯ୍ୟ ପାଇଁ କ support ଣସି ସମର୍ଥନ ନାହିଁ, ତେଣୁ ଆମେ ସାସ୍ ମାଧ୍ୟମରେ ନିଜର ବ୍ୟବହାର କରୁ | ଏହାର ଅର୍ଥ ହେଉଛି CSS ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ଆମର ଥିମ୍ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିବା ଏହି ଉପଯୋଗିତା ସହିତ ରଙ୍ଗ ବିପରୀତ ସମସ୍ୟା ସୃଷ୍ଟି କରିପାରେ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ପ୍ରାଥମିକ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ଦ୍ Secondary ିତୀୟ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ସଫଳତା |
ବିପରୀତ ରଙ୍ଗ ସହିତ ବିପଦ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ଚେତାବନୀ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ସୂଚନା |
ବିପରୀତ ରଙ୍ଗ ସହିତ ଆଲୋକ |
ବିପରୀତ ରଙ୍ଗ ସହିତ ଗା ark |
html
<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

ଉପାଦାନଗୁଡ଼ିକ ସହିତ |

ବ୍ୟାଜ୍ ପରି ସେମାନଙ୍କୁ ମିଳିତ .text-*ଏବଂ ଶ୍ରେଣୀ ସ୍ଥାନରେ ବ୍ୟବହାର କରନ୍ତୁ :.bg-*

ପ୍ରାଥମିକ ସୂଚନା
html
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

କିମ୍ବା କାର୍ଡରେ :

ଶୀର୍ଷଲେଖ

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

ଶୀର୍ଷଲେଖ

କାର୍ଡ ଶିରୋନାମା ଉପରେ ନିର୍ମାଣ ଏବଂ କାର୍ଡର ବିଷୟବସ୍ତୁର ଅଧିକାଂଶ ଅଂଶ ଗଠନ କରିବାକୁ କିଛି ଶୀଘ୍ର ଉଦାହରଣ ପାଠ୍ୟ |

html
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>