Badge te pawh a awm
Badge hrang hrang atana documentation leh entirnan, kan small count leh labeling component te.
em
Badge te hian relative font sizing leh unit hmangin immediate parent element size nena inmil turin an scale thin .
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 badge-light">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.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
A hnuaia tarlan modifier class te hi add la, badge hmel thlak danglam rawh.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 .sr-only
class nena thup belh thuziak ang chi a ni.
.badge-pill
Badge te chu round zawka siam turin modifier class hmang la ( border-radius
horizontal lian zawk leh additional nen padding
). v3 atanga badge i miss chuan a tangkai hle.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Element pakhata contextual .badge-*
class hman hian <a>
rang takin actionable badge te chu hover leh focus state te nen a pe thei a ni.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>