Source

Mabaji

Zolemba ndi zitsanzo za mabaji, chiwerengero chathu chaching'ono ndi gawo la zilembo.

Chitsanzo

Mabaji amakula kuti agwirizane ndi kukula kwa chinthu chapanthawiyo pogwiritsa ntchito masingidwe amtundu ndi emmayunitsi.

Chitsanzo mutu Chatsopano
Chitsanzo mutu Chatsopano
Chitsanzo mutu Chatsopano
Chitsanzo mutu Chatsopano
Chitsanzo mutu Chatsopano
Chitsanzo mutu Chatsopano
<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>

Mabaji atha kugwiritsidwa ntchito ngati gawo la maulalo kapena mabatani kuti mupereke kauntala.

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

Zindikirani kuti kutengera momwe amagwiritsidwira ntchito, mabaji amatha kusokoneza kwa ogwiritsa ntchito zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngakhale masitaelo a mabaji amapereka chithunzithunzi cha cholinga chawo, ogwiritsa ntchitowa amangowonetsedwa zomwe zili mu bajiyo. Kutengera ndi momwe zinthu zilili, mabajiwa amatha kuwoneka ngati mawu owonjezera kapena manambala kumapeto kwa chiganizo, ulalo, kapena batani.

Pokhapokha ngati nkhaniyo ili yomveka bwino (monga chitsanzo cha "Zidziwitso", pomwe zimamveka kuti "4" ndi kuchuluka kwa zidziwitso), ganizirani kuphatikiza mawu owonjezera okhala ndi gawo lobisika la mawu owonjezera.

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

Kusiyana kwamutu

Onjezani makalasi aliwonse omwe atchulidwa pansipa kuti musinthe mawonekedwe a baji.

Pulayimale Sekondale Kupambana Ngozi Chenjezo Zambiri Kuwala Chakuda
<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>
Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Mabaji a mapiritsi

Gwiritsani ntchito .badge-pillkalasi yosinthira kuti mupange mabaji ozungulira kwambiri (okulirapo border-radiuskomanso opingasa padding). Zothandiza ngati muphonya mabaji ochokera ku v3.

Pulayimale Sekondale Kupambana Ngozi Chenjezo Zambiri Kuwala Chakuda
<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>

Kugwiritsa ntchito .badge-*makalasi okhazikika pa <a>chinthu kumapereka mabaji otheka kuchitapo kanthu okhala ndi hover komanso malo olunjika.

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