Swikombiso

Tibeji ti pima ku fambisana na mpimo wa xiaki xa mutswari wa le kusuhi hi ku tirhisa mpimo wa fonto lowu yelanaka na emtiyuniti. Ku sukela eka v5, tibeji a ta ha ri na switayele swa focus kumbe hover swa swihlanganisi.

Tinhloko-mhaka

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

Swikomba-nkarhi

Tibeji tinga tirhisiwa tani hi xiphemu xa swihlanganisi kumbe swikomba-nkarhi ku nyika xibalo.

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

Xiya leswaku swi titshege hi ndlela leyi ti tirhisiwaka ha yona, tibeji ti nga ha pfilunganya vatirhisi va swihlaya-swikirini ni thekinoloji leyi fanaka leyi pfunaka. Hambileswi ku endliwa ka switayili swa tibeji swi nyikaka xikombiso lexi vonakaka xa xikongomelo xa tona, vatirhisi lava va ta nyikiwa ntsena leswi nga endzeni ka beji. Hi ku ya hi xiyimo xo karhi, tibeji leti ti nga ha vonaka ti ri marito lama engetelekeke lama nga hlelekangiki kumbe tinomboro emakumu ka xivulwa, xihlanganisi kumbe buti.

Handle ka loko mongo wu ri erivaleni (tanihi le ka xikombiso xa “Switiviso”, laha ku twisisiwaka leswaku “4” i nhlayo ya switiviso), ehleketa ku katsa mongo lowu engetelekeke hi xiphemu xa tsalwa ro engetela leri fihliweke hi mahlo.

Ku vekiwa eka xiyimo

Tirhisa switirhisiwa ku cinca a .badgeivi u yi veka ekhonweni ya xihlanganisi kumbe buti.

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

U nga ha tlhela u siva .badgetlilasi hi switirhisiwa swin’wana swi nga ri swingani handle ko hlayela xikombiso xa xivumbeko xa le henhla swinene.

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

Mihlovo ya le ndzhaku

Veka a background-colorwith contrasting foreground colorna vapfuni va hina.text-bg-{color} . Khale a swi laveka ku hlanganisa hi voko leswi u swi hlawulaka .text-{color}ni .bg-{color}switirhisiwa swo endla switayele, leswi u nga ha swi tirhisaka loko u swi tsakela.

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

Tibeji ta maphilisi

Tirhisa .rounded-pilltlilasi ya vukorhokeri ku endla leswaku tibeji ti va xirhendzevutani swinene hi 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

Swilo leswi cinca-cincaka

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, tibeji sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .badgefor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$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 swilo leswi cinca-cincaka

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