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

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

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.

html ye

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

html ye

<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 jate kɛ walasa ka taamasiyɛn caman sɔrɔ.

html ye

<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

A farala a kan v5.2.0 kɔnɔ

Set a background-colorni contrasting foreground colorni an .text-bg-{color}dɛmɛbagaw ye . Fɔlɔ a tun wajibiyalen don ka i ka sugandili .text-{color}ni .bg-{color}nafalanw fara ɲɔgɔn kan ni bolo ye ka ɲɛsin cogoya ma, i bɛ se ka baara kɛ ni minnu ye hali bi n’i b’a fɛ.

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

html ye

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

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

html ye

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

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli ka bɔ a nɔ na, badgew bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .badgefor for enhanced real-time customization. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

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