Lencana

Dokumentasi lan conto kanggo lencana, jumlah cilik lan komponen label.

Tuladha

Skala lencana kanggo cocog karo ukuran unsur induk langsung kanthi nggunakake ukuran font relatif lan emunit.

Tuladha judhulAnyar

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

Badges bisa digunakake minangka bagéan saka pranala utawa tombol kanggo nyedhiyani counter.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Elinga yen gumantung carane digunakake, lencana bisa mbingungake pangguna layar maca lan teknologi pitulung sing padha. Nalika gaya lencana menehi tandha visual babagan tujuane, pangguna kasebut mung bakal diwenehi isi lencana kasebut. Gumantung ing kahanan tartamtu, lencana iki bisa katon kaya tembung utawa angka tambahan acak ing pungkasan ukara, link, utawa tombol.

Kajaba konteks kasebut cetha (kaya conto "Kabar", sing dimangerteni yen "4" minangka jumlah kabar), nimbang kalebu konteks tambahan kanthi potongan teks tambahan sing didhelikake.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variasi kontekstual

Tambah kelas modifier sing kasebut ing ngisor iki kanggo ngganti tampilan lencana.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

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

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

Lencana pil

Gunakake .badge-pillkelas modifier kanggo nggawe lencana luwih bunder (kanthi border-radiushorisontal sing luwih gedhe lan tambahan padding). Migunani yen sampeyan kantun lencana saka v3.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

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

Pranala

Nggunakake .badge-*kelas kontekstual ing <a>unsur kanthi cepet nyedhiyakake lencana sing bisa ditindakake kanthi status hover lan fokus.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

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