Badge te pawh a awm

Badge hrang hrang atana documentation leh entirnan, kan small count leh labeling component te.

Entirna

emBadge te hian relative font sizing leh unit hmangin immediate parent element size nena inmil turin an scale thin .

Entirna thupuiThar

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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>

Contextual danglamna hrang hrang

A hnuaia tarlan modifier class te hi add la, badge hmel thlak danglam rawh.

Hmasa ber Secondary lam a ni Hlawhtling Hlauhawm Vaulawkna Info Eng Thim

<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-onlyclass nena thup belh thuziak ang chi a ni.

Pill badge te pawh a awm

.badge-pillBadge te chu round zawka siam turin modifier class hmang la ( border-radiushorizontal lian zawk leh additional nen padding). v3 atanga badge i miss chuan a tangkai hle.

Hmasa ber Secondary lam a ni Hlawhtling Hlauhawm Vaulawkna Info Eng Thim

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

Link te pawh a awm

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.

Hmasa ber Secondary lam a ni Hlawhtling Hlauhawm Vaulawkna Info Eng Thim

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