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

html

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

html

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

html

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

html

<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

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Ðo a background-colorkple ŋgɔdonya si to vovo colorna míaƒe .text-bg-{color}kpeɖeŋutɔwo . Tsã la, wobia tso asiwò be nàtsɔ asi aƒo wò tiatia .text-{color}kple .bg-{color}dɔwɔnu siwo nàtsɔ awɔ atsyãe, siwo nàte ŋu azã kokoko ne èdi.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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ɔ

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, akɔtagbalẽviwo zãa teƒea ƒe CSS tɔtrɔwo le fifia .badgehena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si nyo wu. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass ƒe tɔtrɔwo

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