Badge te pawh a awm
Badge hrang hrang atana documentation leh entirnan, kan small count leh labeling component te.
Entirna te
em
Badge te hian relative font sizing leh unit hmangin immediate parent element size nena inmil turin an scale thin . v5 atang khan badge te hian link atan focus emaw hover style an nei tawh lo.
Thupui hrang hrangte
Entirna thupuiThar
Entirna thupuiThar
Entirna thupuiThar
Entirna thupuiThar
Entirna thupuiThar
Entirna thupuiThar
<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>
Buttons te a awm
Badge hi link emaw button emaw a tel angin counter siam nan hman theih a ni.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
An hman dan azirin screen reader leh a ang chi assistive technology hmangtute tan chuan badge hi a buaithlak thei tih hre reng ang che. Badge-te styling hian an thil tum chu hmuh theiha a hriat theih laiin, heng hmangtute hian badge-a thu awmte chu an rawn present mai dawn a ni. Thil awm dân chiang tak a zirin, heng badge-te hi sentence, link, a nih loh leh button tâwpah random additional word emaw number emaw ang maiin a lang thei a ni.
Context a chiang loh chuan (“Notifications” entîrna ang bawkin, “4” chu notification awm zat a ni tih hriatthiam a nih chuan), thil dang hmuh theiha thup, thuziak belhchhah nêna thup dang dah belh chu ngaihtuah rawh.
Position a awm tawh
Utilities hmangin a siam danglam la .badge
, link emaw button emaw corner-ah dah rawh.
<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>
.badge
Tin, class chu generic zawk indicator atan count awm lovin utility tlemte dang hmangin i thlak thei bawk .
<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>
Background rawng hrang hrang
Kan background utility class te hmangin badge hmel chu rang taka thlak danglam theih a ni. Khawngaihin Bootstrap’s default i hman hian styling dik tak neih nan .bg-light
text color utility ang chi i mamawh mai thei tih hre reng ang che. .text-dark
Hei hi a chhan chu background utility te hian engmah an set loh vang a background-color
ni a .
<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>
Assistive technology-te hnena awmzia thlentu
awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hidden
class nena thup belh thuziak ang chi a ni.
Pill badge te pawh a awm
Utility class hmangin .rounded-pill
badge te chu a lian zawk nen round zawkin siam rawh 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 a ni
Variables te pawh a awm
$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;