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

html

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

html

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

html

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

html

<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

Ditambahake ing v5.2.0

Setel background-colorlatar ngarep sing kontras colorkaro asisten kita.text-bg-{color} . Sadurunge, sampeyan kudu masangake pilihan .text-{color}lan .bg-{color}keperluan kanggo gaya kanthi manual, sing isih bisa digunakake yen sampeyan seneng.

utami Sekunder Sukses bebaya Pènget Info cahya Peteng

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, lencana saiki nggunakake variabel CSS lokal .badgekanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Variabel Sass

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