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

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>

Kancing

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

html

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

Diposisikan

Paké Utiliti pikeun ngaropea a .badgejeung posisi eta dina sudut link atawa 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>

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

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>

Warna latar

Ditambahkeun dina v5.2.0

Setel background-colorsareng latar hareup anu kontras colorsareng pembantu kami.text-bg-{color} . Saméméhna diwajibkeun pikeun masangkeun pilihan anjeun sacara manual .text-{color}sareng .bg-{color}utilitas pikeun gaya, anu anjeun masih tiasa dianggo upami anjeun resep.

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

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>

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

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

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, lencana ayeuna nganggo variabel CSS lokal .badgepikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

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