Lencana
Dokuméntasi sareng conto pikeun lencana, jumlah leutik urang sareng komponén panyiri.
Skala lencana pikeun nyocogkeun ukuran unsur indungna langsung ku ngagunakeun ukuran font relatif sareng emunit.
<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 dipaké salaku bagian tina tumbu atawa tombol pikeun nyadiakeun counter a.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Catet yén gumantung kana kumaha aranjeunna dianggo, lencana tiasa ngabingungkeun pikeun pangguna pamiarsa layar sareng téknologi pitulung anu sami. Nalika gaya lencana nyayogikeun petunjuk visual ngeunaan tujuanana, pangguna ieu ngan saukur bakal dibere eusi lencana. Gumantung kana kaayaan spésifik, badges ieu bisa sigana kawas kecap tambahan acak atawa angka dina tungtung kalimah, link, atawa tombol.
Kacuali kontéksna jelas (sapertos conto "Bewara", dimana kahartos yén "4" mangrupikeun jumlah béwara), pertimbangkeun kalebet kontéks tambahan sareng potongan téks tambahan anu disumputkeun sacara visual.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Tambihkeun salah sahiji kelas modifier anu disebatkeun di handap pikeun ngarobih penampilan badge.
<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>Nepikeun harti kana téknologi anu ngabantosan
Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .sr-onlykelas.
Anggo .badge-pillkelas modifier pikeun ngajantenkeun lencana langkung buleud (kalayan border-radiushorizontal anu langkung ageung sareng tambahan padding). Mangpaat upami anjeun sono kana lencana tina 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>Ngagunakeun .badge-*kelas kontekstual dina hiji <a>unsur gancang nyadiakeun lencana actionable kalawan hover jeung kaayaan 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>