Badge te pawh a awm

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

He page ah hian

Entirna te

emBadge 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

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

.badgeTin, 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-lighttext color utility ang chi i mamawh mai thei tih hre reng ang che. .text-darkHei hi a chhan chu background utility te hian engmah an set loh vang a background-colorni a .

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

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

Pill badge te pawh a awm

Utility class hmangin .rounded-pillbadge te chu a lian zawk nen round zawkin siam rawh border-radius.

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

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