Lencana

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

Dina kaca ieu

Contona

Skala lencana pikeun nyocogkeun ukuran unsur indungna langsung ku ngagunakeun ukuran font relatif sareng emunit. Dina v5, lencana henteu gaduh deui pokus atanapi gaya hover pikeun tautan.

lulugu

Conto judulAnyar

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

Kancing

Badges bisa dipaké salaku bagian tina tumbu atawa tombol pikeun nyadiakeun counter a.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">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.

Diposisikan

Paké Utiliti pikeun ngaropea a .badgejeung posisi eta dina sudut link atawa tombol.

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

Anjeun oge bisa ngaganti .badgekelas kalawan sababaraha Utiliti langkung tanpa count pikeun indikator leuwih generik.

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

Warna latar

Anggo kelas utilitas latar tukang kami pikeun gancang ngarobih tampilan lencana. Punten dicatet yén nalika nganggo standar Bootstrap .bg-light, anjeun sigana peryogi utilitas warna téks sapertos .text-darkpikeun gaya anu leres. Ieu kusabab utilitas latar henteu nyetél nanaon tapi background-color.

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

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

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

Lencana pil

Anggo .rounded-pillkelas utilitas pikeun ngajantenkeun lencana langkung bulat sareng langkung ageung border-radius.

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

<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

Variabel

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