Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

Badge ahorow

Nwoma ne nhwɛsoɔ ma badge, yɛn akontabuo ketewa ne labeling component.

Nhwɛso ahorow

Badge ahorow no susuw ho ma ɛne ɔwofo element a ɛwɔ hɔ ntɛm ara no kɛse hyia denam font kɛse ne emunit ahorow a ɛfa ho a wɔde di dwuma no so. Ɛde besi v5 no, badge nni focus anaa hover styles bio ma links.

Nsɛmti ahorow

Nhwɛso asɛmtiFoforɔ

Nhwɛso asɛmtiFoforɔ

Nhwɛso asɛmtiFoforɔ

Nhwɛso asɛmtiFoforɔ

Nhwɛso asɛmtiFoforɔ
Nhwɛso asɛmtiFoforɔ
<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>

Nsɛmma nhoma no

Wobetumi de badge ahorow adi dwuma sɛ link anaa button ahorow no fã de ama counter.

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

Hyɛ no nsow sɛ, egyina sɛnea wɔde di dwuma so no, ebia badge ahorow no bɛma wɔn a wɔde screen reader ne mfiridwuma a ɛte saa a ɛboa wɔn di dwuma no adwene atu afra. Bere a sɛnea wɔyɛ badge ahorow no ma wotumi hu nea enti a wɔde di dwuma no, nea wɔde badge no mu nsɛm bɛkyerɛ wɔn a wɔde di dwuma yi ara kwa. Ɛgyina tebea pɔtee no so no, saa badge ahorow yi betumi ayɛ te sɛ nsɛmfua anaa nɔma afoforo a wɔde ka ho a wɔanhyɛ da wɔ kasamu, link, anaa bɔtn bi awiei.

Gye sɛ nsɛm a ɛfa ho no mu da hɔ (te sɛ nea ɛte wɔ “Nsɛm a Wɔka Kyerɛ” nhwɛso no ho no, baabi a wɔte ase sɛ “4” no yɛ amanneɛbɔ dodow no), susuw ho sɛ wode nsɛm foforo a ɛfa ho a wɔde nsɛm foforo a wɔde asie wɔ aniwa so bɛka ho.

Wɔde asi hɔ

Fa utilities sesa a .badgena fa si link anaa button bi ntwea so.

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

Wubetumi nso de .badgeutilities kakraa bi foforo asi adesuakuw no ananmu a wonni akontaabu mma generic indicator kɛse.

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

Kɔla ahorow a ɛwɔ akyi

Fa yɛn akyi utility adesua ahorow no sesa ntɛm ara sɛnea badge bi te. Yɛsrɛ wo hyɛ no nsow sɛ sɛ wode Bootstrap's default redi dwuma a .bg-light, ɛda adi sɛ wubehia text color utility te sɛ .text-darkma styling yiye. Eyi te saa efisɛ background utilities nhyehyɛ biribiara gye sɛ background-color.

Mfiaseɛ Nea ɛto so abien Nkunimdie Ɔhaw a ɛbɛtumi aba Kɔkɔbɔ Info Kanea Sum
<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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.

Pill badge ahorow

Fa .rounded-pillutility class no di dwuma ma badge ahorow no yɛ kurukuruwa kɛse a border-radius.

Mfiaseɛ Nea ɛto so abien Nkunimdie Ɔhaw a ɛbɛtumi aba Kɔkɔbɔ Info Kanea Sum
<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

Nneɛma a Ɛsakra

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