ବ୍ୟାଜ୍
ବ୍ୟାଜ୍ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ, ଆମର ଛୋଟ ଗଣନା ଏବଂ ଲେବଲ୍ ଉପାଦାନ |
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>ଏକ ବ୍ୟାଜ୍ ର ରୂପ ବଦଳାଇବା ପାଇଁ ନିମ୍ନରେ ଉଲ୍ଲେଖ କରାଯାଇଥିବା ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମଧ୍ୟରୁ ଯେକ .ଣସି ଯୋଡନ୍ତୁ |
<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 ରୁ ବ୍ୟାଜ୍ ମିସ୍ କରନ୍ତି ତେବେ ଉପଯୋଗୀ |
<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>