Source

ବ୍ୟାଜ୍

ବ୍ୟାଜ୍ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ, ଆମର ଛୋଟ ଗଣନା ଏବଂ ଲେବଲ୍ ଉପାଦାନ |

ଉଦାହରଣ |

emଆପେକ୍ଷିକ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ୟୁନିଟ୍ ବ୍ୟବହାର କରି ତୁରନ୍ତ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ଆକାର ସହିତ ମେଳ କରିବାକୁ ବ୍ୟାଜ୍ ସ୍କେଲ୍ |

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ

ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

କାଉଣ୍ଟର ଯୋଗାଇବା ପାଇଁ ବ୍ୟାଜ୍ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ ର ଅଂଶ ଭାବରେ ବ୍ୟବହୃତ ହୋଇପାରେ |

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସେଗୁଡିକ କିପରି ବ୍ୟବହାର କରାଯାଏ ତାହା ଉପରେ ନିର୍ଭର କରି, ବ୍ୟାଜ୍ ସ୍କ୍ରିନ୍ ପାଠକ ଏବଂ ସମାନ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ହୋଇପାରେ | ବ୍ୟାଜ୍ ର ଷ୍ଟାଇଲିଂ ସେମାନଙ୍କର ଉଦ୍ଦେଶ୍ୟ ବିଷୟରେ ଏକ ଭିଜୁଆଲ୍ କ୍ୟୁ ପ୍ରଦାନ କରୁଥିବାବେଳେ, ଏହି ଉପଭୋକ୍ତାମାନଙ୍କୁ କେବଳ ବ୍ୟାଜ୍ ବିଷୟବସ୍ତୁ ସହିତ ଉପସ୍ଥାପନ କରାଯିବ | ନିର୍ଦ୍ଦିଷ୍ଟ ପରିସ୍ଥିତି ଉପରେ ନିର୍ଭର କରି, ଏହି ବ୍ୟାଜ୍ ଗୁଡିକ ବାକ୍ୟ, ଲିଙ୍କ୍, କିମ୍ବା ବଟନ୍ ଶେଷରେ ଅନିୟମିତ ଅତିରିକ୍ତ ଶବ୍ଦ କିମ୍ବା ସଂଖ୍ୟା ପରି ମନେହୁଏ |

ଯଦି ପ୍ରସଙ୍ଗଟି ସ୍ପଷ୍ଟ ନହୁଏ (“ବିଜ୍ଞପ୍ତି” ଉଦାହରଣ ପରି, ଯେଉଁଠାରେ ଏହା ବୁ understood ାପଡେ ଯେ “4” ହେଉଛି ବିଜ୍ଞପ୍ତି ସଂଖ୍ୟା), ଅତିରିକ୍ତ ପାଠ୍ୟର ଏକ ଦୃଶ୍ୟ ଲୁକ୍କାୟିତ ଖଣ୍ଡ ସହିତ ଅତିରିକ୍ତ ପ୍ରସଙ୍ଗ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ବିଚାର କରନ୍ତୁ |

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

ପ୍ରସଙ୍ଗଗତ ପରିବର୍ତ୍ତନ |

ଏକ ବ୍ୟାଜ୍ ର ରୂପ ବଦଳାଇବା ପାଇଁ ନିମ୍ନରେ ଉଲ୍ଲେଖ କରାଯାଇଥିବା ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମଧ୍ୟରୁ ଯେକ .ଣସି ଯୋଡନ୍ତୁ |

ପ୍ରାଥମିକ ଦ୍ Secondary ିତୀୟ ସଫଳତା | ବିପଦ ଚେତାବନୀ ସୂଚନା ଆଲୋକ ଅନ୍ଧାର
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

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

ପିଲ୍ ବ୍ୟାଜ୍

.badge-pillବ୍ୟାଜ୍କୁ ଅଧିକ ଗୋଲାକାର କରିବା ପାଇଁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ (ଏକ ବୃହତ border-radiusଏବଂ ଅତିରିକ୍ତ ଭୂସମାନ୍ତର ସହିତ padding) | ଯଦି ଆପଣ v3 ରୁ ବ୍ୟାଜ୍ ମିସ୍ କରନ୍ତି ତେବେ ଉପଯୋଗୀ |

ପ୍ରାଥମିକ ଦ୍ Secondary ିତୀୟ ସଫଳତା | ବିପଦ ଚେତାବନୀ ସୂଚନା ଆଲୋକ ଅନ୍ଧାର
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

ଏକ ଉପାଦାନରେ ବିଷୟବସ୍ତୁ .badge-*ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରିବା ଶୀଘ୍ର ହୋଭର ଏବଂ ଫୋକସ୍ ଷ୍ଟେଟସ୍ ସହିତ କାର୍ଯ୍ୟକ୍ଷମ ବ୍ୟାଜ୍ ପ୍ରଦାନ କରିଥାଏ |<a>

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>