Badgew (Badges).

Sɛbɛnw ni misaliw badgew kama, an ka jatebɔ fitinin ani labeli yɔrɔ.

Nin ɲɛ in kan

Misaliw

Badgew bɛ sɛgɛsɛgɛli kɛ walasa ka bɛn bangebaga yɔrɔ teliyalen hakɛ ma ni sɛbɛnnibolo hakɛ danfaralenw ni emunitw ye. Kabini v5, badges tɛ focus walima hover styles sɔrɔ tugun links kama.

Kumakunw

Misali kuncɛcogoKura

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

Butɔnw

Badge bɛ se ka kɛ i n’a fɔ jɛgɛnsira walima butɔni yɔrɔ dɔ walasa ka jatebɔlan di.

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

A kɔlɔsi ko ka kɛɲɛ n’u bɛ baara kɛ cogo min na, badgew bɛ se ka kɛ fɛn ye min bɛ mɔgɔw hakili ɲagami ekran kalanbagaw ni o ɲɔgɔnna dɛmɛni fɛɛrɛw baarakɛlaw la. Hali ni badgew cogoya bɛ taamasiyɛn yelen di u kuntilenna kan, o baarakɛlaw bɛna badge kɔnɔkow jira dɔrɔn. Ka kɛɲɛ ni ko kɛrɛnkɛrɛnnen ye, o badɛjiw bɛ se ka kɛ i n’a fɔ daɲɛ walima nimɔrɔ wɛrɛw faralen ɲɔgɔn kan k’a sɔrɔ u ma kɛ cogo la min bɛ kumasen, jɛgɛnsira walima butɔni laban na.

Fo ni kumasen kɔnɔna jɛlen don (i n’a fɔ a bɛ kɛ cogo min na “Ladɔnniyaliw” misali la, yɔrɔ min na a faamuyara ko “4” ye kunnafonidi hakɛ ye), i k’a lajɛ ka kumasen wɛrɛw fara a kan ni sɛbɛn wɛrɛ ye min dogolen bɛ ye.

A bɛ jɔyɔrɔ la

Baara kɛ ni nafamafɛnw ye walasa ka a ladilan .badgeani k’a bila jɛgɛnsira walima butɔni dɔ nɔngɔn na.

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

Aw bɛ se fana ka .badgekalasi bila a nɔ na ni nafamafɛn damadɔ wɛrɛw ye k’a sɔrɔ aw ma jatebɔ kɛ ka ɲɛsin jiralan caman ma.

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

Kulɛriw kɔkanna

Baara kɛ ni an ka kɔkanna nafama kalanw ye walasa ka badge dɔ cogoya Changer teliya la. Aw k’a kɔlɔsi ko ni aw bɛ baara kɛ ni Bootstrap ka default ye .bg-light, a ka c’a la aw mago bɛna kɛ sɛbɛnni kulɛri nafama na i n’a fɔ .text-darkwalasa ka cogoya ɲuman sɔrɔ. o bɛ kɛ bawo kɔkanna nafalanw tɛ foyi sigi sen kan ni background-color.

Fɔlɔ Seginnkanni Sanga Farati Lasɔmi Info Yeelen Dibi

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

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Badge furakisɛw

baara kɛ ni .rounded-pillnafalan kalasi ye walasa ka badgew kɛ fɛn ye min bɛ lamini ni dɔ ye min ka bon border-radius.

Fɔlɔ Seginnkanni Sanga Farati Lasɔmi Info Yeelen Dibi

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

Yɛlɛma-yɛlɛmaw

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