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

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

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

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

<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

Sebenzisa iiklasi zethu eziluncedo ngasemva ukuze utshintshe ngokukhawuleza inkangeleko yebheji. Nceda qaphela ukuba xa usebenzisa i-Bootstrap engagqibekanga .bg-light, ungafuna umsebenzi wombala wokubhaliweyo njengokwenza .text-darkisimbo esifanelekileyo. Oku kungenxa yokuba izinto eziluncedo ezingasemva azibeki nto kodwa background-color.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

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

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 (umz. umbhalo obonakalayo), okanye lubandakanyiwe 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

<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

Izinto eziguquguqukayo

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