Iibheji

Amaxwebhu kunye nemizekelo yeebheji, inani lethu elincinci kunye necandelo lokuleyibheli.

Kweli phepha

Imizekelo

Iibheji zilinganisa ubungakanani bento engumzali osondeleyo ngokusebenzisa ubungakanani befonti kunye emneeyunithi. Ukusukela nge-v5, iibheji azisenanto yokugxila okanye i-hover styles zamakhonkco.

Izihloko

Umzekelo wesihlokoEntsha

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>

Amaqhosha

Iibheji zingasetyenziswa njengenxalenye yamakhonkco okanye amaqhosha okubonelela ngekhawuntari.

html

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

Qaphela ukuba ngokuxhomekeke kwindlela ezisetyenziswa ngayo, iibheji zinokubhideka kubasebenzisi bezifundi zesikrini kunye nobuchwephesha obuncedisayo obufanayo. Ngelixa isitayile seebheji sibonelela ngombono wenjongo yabo, aba basebenzisi baya kunikezelwa ngokulula kunye nomxholo webheji. Ngokuxhomekeke kwimeko ethile, ezi bheji zinokubonakala ngathi ngamagama angaqhelekanga ongezelelweyo okanye amanani ekupheleni kwesivakalisi, ikhonkco, okanye iqhosha.

Ngaphandle kokuba umxholo ucacile (njengomzekelo othi "Izaziso", apho kuqondwa ukuba "4" linani lezaziso), qwalasela ukubandakanya umxholo ongezelelweyo kunye neqhekeza elibonakalayo elifihliweyo lesicatshulwa esongezelelweyo.

Ibekwe kwindawo

Sebenzisa izinto eziluncedo ukuguqula i .badgekwaye uyibeke kwikona yekhonkco okanye iqhosha.

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>

Unako kwakhona ukubuyisela .badgeiklasi ngezinto eziluncedo ezimbalwa ngaphandle kokubala isilathisi segeneric ngaphezulu.

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 yangasemva

Ifakwe kwi-v5.2.0

Cwangcisa imvelaphibackground-color echaseneyo colornabancedisi bethu.text-bg-{color} . Ngaphambili bekufuneka udibanise ukhetho lwakho ngesandla .text-{color}kunye .bg-{color}nezinto eziluncedo kwisitayile, onokuzisebenzisa ukuba uyakhetha.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

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>

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Iibheji zepilisi

Sebenzisa .rounded-pilliklasi eluncedo ukwenza iibheji zisondezwe ngakumbi ngenkulu border-radius.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

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

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, iibheji ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .badgeukuze ziphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

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