Badgew (Badges).
Sɛbɛnw ni misaliw badgew kama, an ka jatebɔ fitinin ani labeli yɔrɔ.
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 em
unitw ye. Kabini v5, badges tɛ focus walima hover styles sɔrɔ tugun links kama.
Kumakunw
Misali kuncɛcogoKura
Misali kuncɛcogoKura
Misali kuncɛcogoKura
Misali kuncɛcogoKura
Misali kuncɛcogoKura
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 .badge
ani 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 .badge
kalasi 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ɔ.
<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 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-dark
walasa ka cogoya ɲuman sɔrɔ. o bɛ kɛ bawo kɔkanna nafalanw tɛ foyi sigi sen kan ni 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>
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-hidden
kalan ye.
Badge furakisɛw
baara kɛ ni .rounded-pill
nafalan kalasi ye walasa ka badgew kɛ fɛn ye min bɛ lamini ni dɔ ye min ka bon 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 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;