Dagiti pagarigan

Dagiti badge ket ag-scale tapno maipada ti kadakkel ti dagus a nagannak nga elemento babaen ti panagusar ti relatibo a panagdakkel ti letra ken emdagiti yunit. Manipud iti v5, dagiti badge ket awanen kadagiti estilo ti pokus wenno hover para kadagiti silpo.

Dagiti Paulo

<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>

Dagiti Buton

Mabalin nga usaren dagiti badge kas paset dagiti link wenno buton tapno mangipaay iti counter.

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

Paliiwenyo ta depende no kasano ti pannakausar dagitoy, mabalin a makariro dagiti badge kadagiti agus-usar kadagiti screen reader ken umasping a makatulong a teknolohia. Bayat a ti estilo dagiti badge ket mangipaay iti makita a pagilasinan no ania ti panggepda, dagitoy nga agus-usar ket maiparang laeng ti linaon ti badge. Depende iti espesipiko a kasasaad, dagitoy a badge ket mabalin a kasla naiparna a kanayonan a sasao wenno numero iti ngudo ti sentensia, link, wenno buton.

Malaksid no nalawag ti konteksto (kas iti pagarigan ti “Pakaammo,” a sadiay maawatan a ti “4” ket bilang dagiti pakaammo), ibilang ti panangiraman iti kanayonan a konteksto nga addaan iti makita a nailemmeng a pedaso ti kanayonan a teksto.

Naposisionan

Usaren dagiti utilidad tapno baliwan ti a .badgeken iposision daytoy iti suli ti silpo wenno buton.

<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>

Mabalinmo pay a sukatan ti .badgeklase kadagiti sumagmamano pay a utilidad nga awan ti panagbilang para iti ad-adu a sapasap a mangipakita.

<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>

Dagiti kolor ti likudan

Itakderan ti maysa nga addaan itibackground-color agduma a foreground colorkadagiti katulongantayo . Sigud a kasapulan a manual a maiparis ti piliem ken dagiti utilidad para iti estilo, a mabalinmo pay laeng nga usaren no kayatmo..text-bg-{color}.text-{color}.bg-{color}

<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>

Badge ti pildoras

Usaren ti .rounded-pillklase ti utilidad tapno ad-adda a nagtimbukel dagiti badge nga addaan iti dakdakkel a border-radius.

<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 nga

Dagiti Variable

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, dagiti badge ket agus-usar itan kadagiti lokal a CSS a variable on .badgepara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

  --#{$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};
  

Sass dagiti variable

$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;