Iibheji

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

Umzekelo

Iibheji zilinganisa ubungakanani bento engumzali osondeleyo ngokusebenzisa ubungakanani befonti kunye emneeyunithi.

Umzekelo wesihlokoEntsha

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Iibheji zingasetyenziswa njengenxalenye yamakhonkco okanye amaqhosha okubonelela ngekhawuntari.

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Ukwahluka ngokomxholo

Yongeza naziphi na iiklasi zokulungisa ezikhankanywe ngezantsi ukutshintsha inkangeleko yebheji.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 .sr-onlyeklasini.

Iibheji zepilisi

Sebenzisa .badge-pilludidi lwesilungisi ukwenza iibheji zingqukuva (ngenkulu border-radiuskunye neyongezelelweyo ethe tye padding). Iluncedo ukuba uphosa iibheji ezivela kwi-v3.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

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

Unxulumano

Ukusebenzisa .badge-*iiklasi zomxholo kwi- <a>element ngokukhawuleza ukubonelela ngeebheji ezinokuthatha isenzo kunye ne-hover kunye ne-focus states.

Amabanga aphantsi Eyesibini Impumelelo Ingozi Isilumkiso Ulwazi Ukukhanya Mnyama

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