ବ୍ୟାଜ୍

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

ଏହି ପୃଷ୍ଠାରେ |

ଉଦାହରଣଗୁଡିକ

emଆପେକ୍ଷିକ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ୟୁନିଟ୍ ବ୍ୟବହାର କରି ତୁରନ୍ତ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ଆକାର ସହିତ ମେଳ କରିବାକୁ ବ୍ୟାଜ୍ ସ୍କେଲ୍ | V5 ପରି, ବ୍ୟାଜ୍ ଗୁଡିକ ଆଉ ଲିଙ୍କ୍ ପାଇଁ ଫୋକସ୍ କିମ୍ବା ହୋଭର୍ ଷ୍ଟାଇଲ୍ ନାହିଁ |

ଶିରୋନାମା

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

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

ବଟନ୍

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

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

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

ସ୍ଥିତ

.badgeଏକ ରୂପାନ୍ତର କରିବାକୁ ଏବଂ ଏହାକୁ ଏକ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ କୋଣରେ ରଖିବା ପାଇଁ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeଅଧିକ ଜେନେରିକ୍ ସୂଚକ ପାଇଁ ଗଣନା ବିନା ଆପଣ କ୍ଲାସ୍କୁ ଆଉ କିଛି ୟୁଟିଲିଟି ସହିତ ବଦଳାଇ ପାରିବେ |

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

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

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

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

ପ୍ରାଥମିକ ଦ୍ Secondary ିତୀୟ ସଫଳତା | ବିପଦ ଚେତାବନୀ ସୂଚନା ଆଲୋକ ଅନ୍ଧାର

html

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

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

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

ପିଲ୍ ବ୍ୟାଜ୍

.rounded-pillଏକ ବଡ଼ ସହିତ ବ୍ୟାଜ୍କୁ ଅଧିକ ଗୋଲାକାର କରିବା ପାଇଁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ border-radius|

ପ୍ରାଥମିକ ଦ୍ Secondary ିତୀୟ ସଫଳତା | ବିପଦ ଚେତାବନୀ ସୂଚନା ଆଲୋକ ଅନ୍ଧାର

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

ଭେରିଏବଲ୍ |

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ବିକାଶଶୀଳ CSS ଭେରିଏବଲ୍ ପଦ୍ଧତିର ଏକ ଅଂଶ ଭାବରେ, ବ୍ୟାଜ୍ ବର୍ତ୍ତମାନ ସ୍ଥାନୀୟ .badgeରିଏଲ୍-ଟାଇମ୍ କଷ୍ଟୋମାଇଜେସନ୍ ପାଇଁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରେ | CSS ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

ସାସ୍ ଭେରିଏବଲ୍ |

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;