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 em
unit 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 .badge
na 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 .badge
utilities 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-dark
ma styling yiye. Eyi te saa efisɛ background utilities nhyehyɛ biribiara gye sɛ 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>
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-hidden
adesuakuw no mu.
Pill badge ahorow
Fa .rounded-pill
utility class no di dwuma ma badge ahorow no yɛ kurukuruwa kɛse a 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
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;