Lencana

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

Contoh

Skala lencana untuk memadankan saiz elemen induk serta-merta dengan menggunakan saiz dan emunit fon relatif.

Contoh tajukBaru

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Lencana boleh digunakan sebagai sebahagian daripada pautan atau butang untuk menyediakan kaunter.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Ambil perhatian bahawa bergantung pada cara ia digunakan, lencana mungkin mengelirukan bagi pengguna pembaca skrin dan teknologi bantuan yang serupa. Walaupun penggayaan lencana memberikan petunjuk visual tentang tujuan mereka, pengguna ini hanya akan dipersembahkan dengan kandungan lencana. Bergantung pada situasi tertentu, lencana ini mungkin kelihatan seperti perkataan atau nombor tambahan rawak pada akhir ayat, pautan atau butang.

Melainkan konteksnya jelas (seperti contoh "Pemberitahuan", yang difahami bahawa "4" ialah bilangan pemberitahuan), pertimbangkan untuk memasukkan konteks tambahan dengan sekeping teks tambahan yang tersembunyi secara visual.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variasi kontekstual

Tambah mana-mana kelas pengubah suai yang disebutkan di bawah untuk menukar rupa lencana.

utama Menengah Kejayaan bahaya Amaran info Cahaya Gelap

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

Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas.

Lencana pil

Gunakan .badge-pillkelas pengubah suai untuk menjadikan lencana lebih bulat (dengan border-radiusmendatar yang lebih besar dan tambahan padding). Berguna jika anda terlepas lencana dari v3.

utama Menengah Kejayaan bahaya Amaran info Cahaya Gelap

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

Pautan

Menggunakan kelas kontekstual .badge-*pada <a>elemen dengan cepat menyediakan lencana boleh diambil tindakan dengan keadaan tuding dan fokus.

utama Menengah Kejayaan bahaya Amaran info Cahaya Gelap

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>