Amabheji

Amadokhumenti nezibonelo zamabheji, ukubala kwethu okuncane kanye nengxenye yokulebula.

Kuleli khasi

Izibonelo

Amabheji akala ukuze afane nosayizi wesici somzali esiseduze ngokusebenzisa usayizi wefonti emnamayunithi. Kusukela ku-v5, amabheji awasenazo izitayela zokugxila noma ezihamba phambili zezixhumanisi.

Izihloko

Isibonelo sesihlokoOkusha

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

Izinkinobho

Amabheji angasetshenziswa njengengxenye yezixhumanisi noma izinkinobho ukuze unikeze isibali.

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

Qaphela ukuthi kuye ngokuthi asetshenziswa kanjani, amabheji angase adide kubasebenzisi bezifundi zesikrini nobuchwepheshe obufanayo bokusiza. Nakuba isitayela samabheji sinikeza inkomba yokubuka ngenjongo yawo, laba basebenzisi bazovele bethulwe nokuqukethwe kwebheji. Kuye ngesimo esithile, lawa mabheji angase abonakale njengamagama engeziwe angahleliwe noma izinombolo ekugcineni komusho, isixhumanisi, noma inkinobho.

Ngaphandle kwalapho umongo ucacile (njengesibonelo esithi “Izaziso”, lapho kuqondwa khona ukuthi “4” inombolo yezaziso), cabangela ukufaka umongo owengeziwe nocezu olubonakalayo olufihlekile lombhalo owengeziwe.

Imisiwe

Sebenzisa izinsiza ukuze uguqule u-a .badgefuthi uyibeke ekhoneni lesixhumanisi noma inkinobho.

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

Ungakwazi futhi ukufaka esikhundleni .badgesekilasi ezinye izinsiza ezimbalwa ngaphandle kokubala ukuze uthole inkomba ejwayelekile.

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

Imibala yangemuva

Sebenzisa amakilasi ethu okusebenza angemuva ukuze uguqule ngokushesha ukubukeka kwebheji. Sicela uqaphele ukuthi uma usebenzisa okuzenzakalelayo kwe-Bootstrap .bg-light, cishe uzodinga insiza yombala wombhalo efana .text-darknokwenza isitayela esifanele. Lokhu kungenxa yokuthi izinsiza zangemuva azibeki lutho ngaphandle kokuthi background-color.

Okuyinhloko Okwesibili Impumelelo Ingozi Isexwayiso Ulwazi Ukukhanya Kumnyama

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

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hiddennekilasi.

Amabheji ephilisi

Sebenzisa .rounded-pillikilasi lensiza ukwenza amabheji abe yindilinga enkulu ngenkulu border-radius.

Okuyinhloko Okwesibili Impumelelo Ingozi Isexwayiso Ulwazi Ukukhanya Kumnyama

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

Sass

Okuguquguqukayo

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