Lencana

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

Ing kaca iki

Tuladha

Skala lencana kanggo cocog karo ukuran unsur induk langsung kanthi nggunakake ukuran font relatif lan emunit. Ing v5, lencana ora ana maneh fokus utawa gaya hover kanggo pranala.

Judhul

Tuladha judhulAnyar

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

Tombol

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

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

dipanggonke

Gunakake keperluan kanggo ngowahi a .badgelan posisi ing pojok link utawa 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>

Sampeyan uga bisa ngganti .badgekelas karo sawetara keperluan liyane tanpa count kanggo Indikator liyane umum.

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

Werna latar mburi

Gunakake kelas utilitas latar mburi kanggo ngganti tampilan lencana kanthi cepet. Wigati dimangerteni manawa nggunakake standar Bootstrap .bg-light, sampeyan bakal mbutuhake utilitas warna teks kaya .text-darkkanggo gaya sing tepat. Iki amarga utilitas latar mburi ora nyetel apa-apa nanging background-color.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

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

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

Lencana pil

Gunakake .rounded-pillkelas sarana kanggo nggawe lencana luwih dibunderaké kanthi luwih gedhe border-radius.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

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