ରଙ୍ଗଗୁଡିକ |
ହାତଗଣତି ରଙ୍ଗ ଉପଯୋଗୀ ଶ୍ରେଣୀ ସହିତ ରଙ୍ଗ ମାଧ୍ୟମରେ ଅର୍ଥ ପହଞ୍ଚାନ୍ତୁ | ହୋଭର ଷ୍ଟେଟସ୍ ସହିତ ଷ୍ଟାଇଲ୍ ଲିଙ୍କ୍ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
.text-primary
.text-secondary
.text- ସଫଳତା |
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>ପ୍ରଦତ୍ତ ହୋଭର ଏବଂ ଫୋକସ୍ ଷ୍ଟେଟସ୍ ସହିତ ଆଙ୍କର୍ ଉପରେ ବିଷୟବସ୍ତୁ ପାଠ୍ୟ ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଭଲ କାମ କରେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ .text-whiteଏବଂ .text-mutedଶ୍ରେଣୀର କ link ଣସି ଲିଙ୍କ୍ ଷ୍ଟାଇଲ୍ ନାହିଁ |
<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-*ଉପଯୋଗିତା ବ୍ୟବହାର କରିବାକୁ ଚାହାଁନ୍ତି |
<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>ଯେତେବେଳେ $enable-gradientsସତ୍ୟକୁ ସେଟ୍ କରାଯାଏ, ଆପଣ .bg-gradient-ଉପଯୋଗିତା କ୍ଲାସ ବ୍ୟବହାର କରିବାକୁ ସକ୍ଷମ ହେବେ | ଡିଫଲ୍ଟ ଭାବରେ, $enable-gradientsଅକ୍ଷମ ହୋଇଛି ଏବଂ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଭାବରେ ଭାଙ୍ଗିଯାଇଛି | ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା ଆରମ୍ଭ କରିବା ଠାରୁ ସହଜ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଏହା କରାଯାଇଥାଏ | ଏହି ଶ୍ରେଣୀଗୁଡିକ ଏବଂ ଅଧିକ ସକ୍ଷମ କରିବାକୁ ଆମର ସାସ୍ ବିକଳ୍ପଗୁଡ଼ିକ ବିଷୟରେ ଶିଖନ୍ତୁ |
<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ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |