Lencana
Dokumentasi dan contoh untuk lencana, kiraan kecil dan komponen pelabelan kami.
Skala lencana untuk memadankan saiz elemen induk serta-merta dengan menggunakan saiz dan emunit fon relatif.
<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>Tambah mana-mana kelas pengubah suai yang disebutkan di bawah untuk menukar rupa lencana.
<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.
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.
<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>Menggunakan kelas kontekstual .badge-*pada <a>elemen dengan cepat menyediakan lencana boleh diambil tindakan dengan keadaan tuding dan fokus.
<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>