Beji

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

Katika ukurasa huu

Mifano

Beji hupimwa ili kulingana na ukubwa wa kipengele cha mzazi kwa kutumia saizi na emvizio vya fonti. Kufikia v5, beji hazina tena mitindo ya kulenga au kuelea juu ya viungo.

Vichwa

Mfano wa kichwaMpya

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

Vifungo

Beji zinaweza kutumika kama sehemu ya viungo au vifungo ili kutoa kaunta.

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

Imewekwa

Tumia huduma kurekebisha a .badgena kuiweka kwenye kona ya kiungo au kitufe.

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

Unaweza pia kubadilisha .badgedarasa na huduma chache zaidi bila hesabu kwa kiashiria cha kawaida zaidi.

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

Rangi za mandharinyuma

Tumia madarasa yetu ya matumizi ya usuli kubadilisha haraka mwonekano wa beji. Tafadhali kumbuka kuwa unapotumia chaguo-msingi la Bootstrap .bg-light, utahitaji matumizi ya rangi ya maandishi kama .text-darkkwa mtindo unaofaa. Hii ni kwa sababu huduma za mandharinyuma haziweki chochote isipokuwa background-color.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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

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

Beji za vidonge

Tumia .rounded-pilldarasa la matumizi kutengeneza beji zenye mviringo zaidi na kubwa zaidi border-radius.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

<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

Vigezo

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