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

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

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

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

<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

Gunakan kelas utilitas latar belakang kami untuk mengubah tampilan lencana dengan cepat. Harap dicatat bahwa saat menggunakan default Bootstrap .bg-light, Anda mungkin memerlukan utilitas warna teks seperti .text-darkuntuk penataan yang tepat. Ini karena utilitas latar belakang tidak mengatur apa pun kecuali background-color.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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

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

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

Kelancangan

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;