Lencana
Dokumentasi lan conto kanggo lencana, jumlah cilik lan komponen label.
Skala lencana kanggo cocog karo ukuran unsur induk langsung kanthi nggunakake ukuran lan emunit font relatif.
<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>Tambah kelas modifier sing kasebut ing ngisor iki kanggo ngganti tampilan lencana.
<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.
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.
<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>Nggunakake .badge-*kelas kontekstual ing <a>unsur kanthi cepet nyedhiyakake lencana sing bisa ditindakake kanthi status hover lan fokus.
<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>