Akɔtagbalẽviwo

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

Le axa sia dzi

Kpɔɖeŋuwo

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. Tso v5 dzi la, akɔtagbalẽviwo megakpɔa ŋkuléleɖenuŋu alo hover ƒe atsyãwo na kadodowo o.

Tanyawo

Kpɔɖeŋu tanyaYɛye

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

Abɔtawo ƒe ƒuƒoƒo

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 bg-secondary">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.

Woɖoe ɖe Ðoƒe

Zã dɔwɔnuwo nàtsɔ atrɔ asi le a ŋu .badgeeye nàdae ɖe kadodo alo abɔta ƒe dzogoe dzi.

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

Àte ŋu atsɔ .badgedɔwɔnu ʋee aɖewo bubuwo aɖɔli klass la hã xexlẽme aɖeke manɔmee na dzesi si nye nusi bɔ wu.

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

Amadede siwo le megbe

Zã míaƒe megbenyawo ƒe dɔwɔnu ƒe klasswo nàtsɔ atrɔ akɔtagbalẽvi aɖe ƒe dzedzeme kaba. Taflatse de dzesii be ne èle Bootstrap ƒe default zãm la .bg-light, anɔ eme be àhiã nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnu abe .text-darkna atsyã nyuitɔ ene. Esia le alea elabena megbenyawo ƒe dɔwɔnuwo meɖoa naneke o negbe background-color.

Gɔmedzeƒe Sekɛndrisuku Dzidzedzekpᴐkpᴐ Ŋɔdzi Kpɔnyuiedodo Nyatakaka Kekeli Nyrɔ

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

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 .visually-hiddenklass la ene.

Atikekuiwo ƒe akɔtagbalẽviwo

Zã .rounded-pillutility class la nàtsɔ ana akɔtagbalẽviwo nanye goglo wu kple border-radius.

Gɔmedzeƒe Sekɛndrisuku Dzidzedzekpᴐkpᴐ Ŋɔdzi Kpɔnyuiedodo Nyatakaka Kekeli Nyrɔ

<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 ƒe nyawo

Nusiwo trɔna

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