Beji
Nyaraka na mifano ya beji, hesabu yetu ndogo na sehemu ya lebo.
Beji hupimwa ili kulingana na ukubwa wa kipengele cha mzazi kwa kutumia saizi na emvizio vya fonti.
<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>Beji zinaweza kutumika kama sehemu ya viungo au vifungo ili kutoa kaunta.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Kumbuka kuwa kulingana na jinsi zinavyotumiwa, beji zinaweza kuwachanganya watumiaji wa visoma skrini na teknolojia sawa za usaidizi. Ingawa mtindo wa beji unatoa kidokezo cha kuona kuhusu madhumuni yao, watumiaji hawa watawasilishwa tu na maudhui ya beji. Kulingana na hali mahususi, beji hizi zinaweza kuonekana kama maneno au nambari za ziada bila mpangilio mwishoni mwa sentensi, kiungo au kitufe.
Isipokuwa muktadha ni wazi (kama ilivyo kwa mfano wa "Arifa", ambapo inaeleweka kuwa "4" ni idadi ya arifa), zingatia kujumuisha muktadha wa ziada na kipande cha maandishi cha ziada kinachoonekana.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Ongeza darasa zozote kati ya zilizotajwa hapa chini za kurekebisha ili kubadilisha mwonekano wa beji.
<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>Kuwasilisha maana kwa teknolojia za usaidizi
Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.
Tumia .badge-pilldarasa la kirekebishaji kufanya beji ziwe na mviringo zaidi (na kubwa border-radiusna ya ziada ya mlalo padding). Inafaa ikiwa utakosa beji kutoka kwa v3.
<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>.badge-*Kutumia madarasa ya muktadha kwenye <a>kipengele kwa haraka toa beji zinazoweza kutekelezeka zenye hali ya kuelea na kuzingatia.
<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>