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ŋuwo
Akɔtagbalẽviwo dzidzena be woasɔ kple dzila ƒe akpa si le enumake ƒe lolome to ŋɔŋlɔdzesiwo ƒe lolome kple em
xexlẽ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
Kpɔɖeŋu tanyaYɛye
Kpɔɖeŋu tanyaYɛye
Kpɔɖeŋu tanyaYɛye
Kpɔɖeŋu tanyaYɛye
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 aɖe si woɣla ɖe nukpɔkpɔ me ŋu.
Woɖoe ɖe Ðoƒe
Zã dɔwɔnuwo nàtsɔ atrɔ asi le a ŋu .badge
eye 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ɔ .badge
dɔ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-dark
na atsyã nyuitɔ ene. Esia le alea elabena megbenyawo ƒe dɔwɔnuwo meɖoa naneke o negbe background-color
.
<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 ɖe .visually-hidden
klass la ŋu ene.
Atikekuiwo ƒe akɔtagbalẽviwo
Zã .rounded-pill
utility class la nàtsɔ ana akɔtagbalẽviwo nanye goglo wu kple border-radius
.
<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;