Beji

Nyaraka na mifano ya beji, hesabu yetu ndogo na sehemu ya lebo.

Mfano

Beji hupimwa ili kulingana na ukubwa wa kipengele cha mzazi kwa kutumia saizi na emvizio vya fonti.

Mfano wa kichwa Mpya

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

Tofauti za muktadha

Ongeza darasa zozote kati ya zilizotajwa hapa chini za kurekebisha ili kubadilisha mwonekano wa beji.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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

Beji za vidonge

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.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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

Viungo

.badge-*Kutumia madarasa ya muktadha kwenye <a>kipengele kwa haraka toa beji zinazoweza kutekelezeka zenye hali ya kuelea na kuzingatia.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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