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

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>

Izinkinobho

Amabheji angasetshenziswa njengengxenye yezixhumanisi noma izinkinobho ukuze unikeze isibali.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

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>

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

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>

Imibala yangemuva

Kwengezwe ku-v5.2.0

Setha background-coloringaphambili colorelinokuqhathanisa nabasizi bethu.text-bg-{color} . Ngaphambilini bekudingeka ukuthi ubhanqe ukukhetha kwakho .text-{color}kanye .bg-{color}nezinsiza zokwenza isitayela, ongazisebenzisa uma uthanda.

Okuyinhloko Okwesibili Impumelelo Ingozi Isexwayiso Ulwazi Ukukhanya Kumnyama

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>

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

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

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka ye-CSS ye-Bootstrap, amabheji manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS .badgeukuze enze ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

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

Izinguquko ze-Sass

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