Lencana

Dokumentasi dan contoh untuk lencana, jumlah kecil dan komponen pelabelan kami.

Di halaman ini

Contoh

Skala lencana agar sesuai dengan ukuran elemen induk langsung dengan menggunakan ukuran dan emunit font relatif. Pada v5, lencana tidak lagi memiliki gaya fokus atau arahkan kursor untuk tautan.

Judul

Contoh judulBaru

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

Lencana dapat digunakan sebagai bagian dari tautan atau tombol untuk memberikan penghitung.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Perhatikan bahwa bergantung pada cara penggunaannya, lencana mungkin membingungkan bagi pengguna pembaca layar dan teknologi bantu serupa. Sementara gaya lencana memberikan isyarat visual untuk tujuan mereka, pengguna ini hanya akan disajikan dengan konten lencana. Bergantung pada situasi tertentu, lencana ini mungkin tampak seperti kata atau angka tambahan acak di akhir kalimat, tautan, atau tombol.

Kecuali konteksnya jelas (seperti contoh “Pemberitahuan”, yang dipahami bahwa “4” adalah jumlah notifikasi), pertimbangkan untuk menyertakan konteks tambahan dengan bagian teks tambahan yang tersembunyi secara visual.

Diposisikan

Gunakan utilitas untuk mengubah .badgedan memposisikannya di sudut tautan atau 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>

Anda juga dapat mengganti .badgekelas dengan beberapa utilitas lagi tanpa menghitung indikator yang lebih 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>

Warna latar belakang

Ditambahkan di v5.2.0

Atur a background-colordengan latar depan yang kontras colordengan helper kami.text-bg-{color} . Sebelumnya diperlukan untuk secara manual memasangkan pilihan .text-{color}dan .bg-{color}utilitas Anda untuk penataan, yang masih dapat Anda gunakan jika Anda mau.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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>

Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Lencana pil

Gunakan .rounded-pillkelas utilitas untuk membuat lencana lebih bulat dengan border-radius.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, lencana sekarang menggunakan variabel CSS lokal .badgeuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

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