Source

Akɔtagbalẽviwo

Nuŋlɔɖi kple kpɔɖeŋuwo na akɔtagbalẽviwo, míaƒe xexlẽdzesi sue kple dzesidede ƒe akpa.

Kpɔɖeŋu

Akɔtagbalẽviwo dzidzena be woasɔ kple dzila ƒe akpa si le enumake ƒe lolome to ŋɔŋlɔdzesiwo ƒe lolome kple emxexlẽdzesiwo zazã me.

Kpɔɖeŋu tanya Yɛye
Kpɔɖeŋu tanya Yɛye
Kpɔɖeŋu tanya Yɛye
Kpɔɖeŋu tanya Yɛye
Kpɔɖeŋu tanya Yɛye
Kpɔɖeŋu tanya Yɛye
<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>

Woate ŋu azã akɔtagbalẽviwo abe kadodowo alo abɔtawo ƒe akpa aɖe ene atsɔ ana xexlẽdzesi aɖe.

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

De dzesii be le alesi wozãa woe nu la, akɔtagbalẽviwo ate ŋu atɔtɔ ame siwo zãa screen reader kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu. Togbɔ be alesi wowɔ akɔtagbalẽviawoe naa wokpɔa taɖodzinu si le wo ŋu le susu me hã la, ɖeko woatsɔ akɔtagbalẽvia me nyawo afia ezãla siawo. Le nɔnɔmea koŋ nu la, akɔtagbalẽvi siawo ate ŋu adze abe nya alo xexlẽdzesi siwo wotsɔ kpe ɖe eŋu le vome le nyagbe aɖe, kadodo aɖe, alo abɔta aɖe ƒe nuwuwu ene.

Negbe ɖe nya siwo ƒo xlãe me kɔ (abe alesi wòle le “Nyatakakawo” ƒe kpɔɖeŋua gome ene, afisi wose egɔme le be “4” lae nye nyatakakaawo ƒe xexlẽme), bu nya siwo ƒo xlãe bubuwo kpe ɖe nuŋɔŋlɔ bubu si woɣla ɖe nukpɔkpɔ me ŋu.

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

Nya siwo ƒo xlãe ƒe vovototowo

Tsɔ tɔtrɔ ƒe hatsotso siwo míeyɔ ɖe ete la dometɔ aɖe kpe ɖe eŋu be nàtrɔ akɔtagbalẽvi aɖe ƒe dzedzeme.

Gɔmedzeƒe Sekɛndrisuku Dzidzedzekpᴐkpᴐ Ŋɔdzi Kpɔnyuiedodo Nyatakaka Kekeli Nyrɔ
<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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .sr-onlyklass la ene.

Atikekuiwo ƒe akɔtagbalẽviwo

.badge-pilltɔtrɔ ƒe hatsotso la nàtsɔ ana akɔtagbalẽviwo nanɔ goglo wu (kple border-radiushorizontal si lolo wu eye wògatsɔ kpe ɖe eŋu padding). Viɖe le ŋuwò ne èto akɔtagbalẽvi siwo tso v3 me la ŋu.

Gɔmedzeƒe Sekɛndrisuku Dzidzedzekpᴐkpᴐ Ŋɔdzi Kpɔnyuiedodo Nyatakaka Kekeli Nyrɔ
<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>

Zã nya siwo ƒo xlãe .badge-*ƒe klasswo le <a>element aɖe dzi kabakaba naa actionable badges kple hover kple focus nɔnɔmewo.

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