Lencana

Dokuméntasi sareng conto pikeun lencana, jumlah leutik urang sareng komponén panyiri.

Contona

Skala lencana pikeun nyocogkeun ukuran unsur indungna langsung ku ngagunakeun ukuran font relatif sareng emunit.

Conto judulAnyar

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

Variasi kontekstual

Tambihkeun salah sahiji kelas modifier anu disebatkeun di handap pikeun ngarobih penampilan badge.

primér Sekunder Kasuksésan Bahaya Awas Inpo Caang Poek

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

Lencana pil

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.

primér Sekunder Kasuksésan Bahaya Awas Inpo Caang Poek

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

Tumbu

Ngagunakeun .badge-*kelas kontekstual dina hiji <a>unsur gancang nyadiakeun lencana actionable kalawan hover jeung kaayaan fokus.

primér Sekunder Kasuksésan Bahaya Awas Inpo Caang Poek

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