ରଙ୍ଗଗୁଡିକ |
ହାତଗଣତି ରଙ୍ଗ ଉପଯୋଗୀ ଶ୍ରେଣୀ ସହିତ ରଙ୍ଗ ମାଧ୍ୟମରେ ଅର୍ଥ ପହଞ୍ଚାନ୍ତୁ | ହୋଭର ଷ୍ଟେଟସ୍ ସହିତ ଷ୍ଟାଇଲ୍ ଲିଙ୍କ୍ ପାଇଁ ସମର୍ଥନ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ନିର୍ଦ୍ଦିଷ୍ଟତା ସହିତ କାରବାର |
ବେଳେବେଳେ ଅନ୍ୟ ଚୟନକର୍ତ୍ତାଙ୍କ ନିର୍ଦ୍ଦିଷ୍ଟତା ହେତୁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ | <div>
କେତେକ କ୍ଷେତ୍ରରେ, ତୁମର ଉପାଦାନର ବିଷୟବସ୍ତୁକୁ ଶ୍ରେଣୀ ସହିତ ଗୁଡ଼ାଇବା ପାଇଁ ଏକ ପର୍ଯ୍ୟାପ୍ତ କାର୍ଯ୍ୟଧାରା |
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-only
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ରଙ୍ଗ
.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-*
ଉପଯୋଗିତା ବ୍ୟବହାର କରିବାକୁ ଚାହାଁନ୍ତି |
<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
ସେଟ୍ ହୋଇଛି true
(ଡିଫଲ୍ଟ ହେଉଛି false
), ଆପଣ .bg-gradient-
ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରିପାରିବେ | ଏହି ଶ୍ରେଣୀଗୁଡିକ ଏବଂ ଅଧିକ ସକ୍ଷମ କରିବାକୁ ଆମର ସାସ୍ ବିକଳ୍ପଗୁଡ଼ିକ ବିଷୟରେ ଶିଖନ୍ତୁ |
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark