Source

ରଙ୍ଗଗୁଡିକ |

ହାତଗଣତି ରଙ୍ଗ ଉପଯୋଗୀ ଶ୍ରେଣୀ ସହିତ ରଙ୍ଗ ମାଧ୍ୟମରେ ଅର୍ଥ ପହଞ୍ଚାନ୍ତୁ | ହୋଭର ଷ୍ଟେଟସ୍ ସହିତ ଷ୍ଟାଇଲ୍ ଲିଙ୍କ୍ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ରଙ୍ଗ

.text-primary

.text-secondary

.text- ସଫଳତା |

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

ପ୍ରଦତ୍ତ ହୋଭର ଏବଂ ଫୋକସ୍ ଷ୍ଟେଟସ୍ ସହିତ ଆଙ୍କର୍ ଉପରେ ବିଷୟବସ୍ତୁ ପାଠ୍ୟ ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଭଲ କାମ କରେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଅଣ୍ଡରଲାଇନ୍ ବାହାରେ .text-whiteଏବଂ .text-mutedକ୍ଲାସରେ କ additional ଣସି ଅତିରିକ୍ତ ଲିଙ୍କ୍ ଷ୍ଟାଇଲ୍ ନାହିଁ |

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

ପୃଷ୍ଠଭୂମି ରଙ୍ଗ |

ବିଷୟବସ୍ତୁ ପାଠ୍ୟ ରଙ୍ଗ ଶ୍ରେଣୀ ପରି, ଯେକ any ଣସି ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀରେ ଏକ ଉପାଦାନର ପୃଷ୍ଠଭୂମି ସହଜରେ ସେଟ୍ କରନ୍ତୁ | ଟେକ୍ସଟ୍ କ୍ଲାସ୍ ପରି ଆଙ୍କର୍ ଉପାଦାନଗୁଡ଼ିକ ହୋଭର୍ ଉପରେ ଅନ୍ଧାର ହୋଇଯିବ | ପୃଷ୍ଠଭୂମି ଉପଯୋଗିତା ସେଟ୍ ହୋଇନାହିଁcolor , ତେଣୁ କେତେକ କ୍ଷେତ୍ରରେ ଆପଣ .text-*ଉପଯୋଗିତା ବ୍ୟବହାର କରିବାକୁ ଚାହାଁନ୍ତି |

.bg- ପ୍ରାଥମିକ
.bg- ଦ୍ secondary ିତୀୟ
.bg- ସଫଳତା |
.bg- ବିପଦ
.bg- ଚେତାବନୀ |
.bg- ସୂଚନା
.bg- ଆଲୋକ
.bg- ଅନ୍ଧକାର |
.bg- ଧଳା |
.bg- ସ୍ୱଚ୍ଛ
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

ପୃଷ୍ଠଭୂମି ଗ୍ରେଡିଏଣ୍ଟ୍ |

ଯେତେବେଳେ $enable-gradientsସତ୍ୟକୁ ସେଟ୍ କରାଯାଏ, ଆପଣ .bg-gradient-ଉପଯୋଗିତା କ୍ଲାସ ବ୍ୟବହାର କରିବାକୁ ସକ୍ଷମ ହେବେ | ଡିଫଲ୍ଟ ଭାବରେ, $enable-gradientsଅକ୍ଷମ ହୋଇଛି ଏବଂ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଭାବରେ ଭାଙ୍ଗିଯାଇଛି | ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା ଆରମ୍ଭ କରିବା ଦିନଠାରୁ ଏହା ସହଜ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ କରାଯାଇଥାଏ | ଏହି ଶ୍ରେଣୀଗୁଡିକ ଏବଂ ଅଧିକ ସକ୍ଷମ କରିବାକୁ ଆମର ସାସ୍ ବିକଳ୍ପଗୁଡ଼ିକ ବିଷୟରେ ଶିଖନ୍ତୁ |

.bg-gradient-primary
.bg-gradient-secondary
.bg- ଗ୍ରେଡିଏଣ୍ଟ୍-ସଫଳତା |
.bg- ଗ୍ରେଡିଏଣ୍ଟ୍-ବିପଦ |
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

ନିର୍ଦ୍ଦିଷ୍ଟତା ସହିତ କାରବାର |

ବେଳେବେଳେ ଅନ୍ୟ ଚୟନକର୍ତ୍ତାଙ୍କ ନିର୍ଦ୍ଦିଷ୍ଟତା ହେତୁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ | <div>କେତେକ କ୍ଷେତ୍ରରେ, ତୁମର ଉପାଦାନର ବିଷୟବସ୍ତୁକୁ ଶ୍ରେଣୀ ସହିତ ଗୁଡ଼ାଇବା ପାଇଁ ଏକ ପର୍ଯ୍ୟାପ୍ତ କାର୍ଯ୍ୟଧାରା |

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |