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 em
unit fon relatif. Mulai v5, lencana tidak lagi mempunyai gaya fokus atau tuding untuk pautan.
Tajuk
Contoh tajukBaru
Contoh tajukBaru
Contoh tajukBaru
Contoh tajukBaru
Contoh tajukBaru
Contoh tajukBaru
<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>
Butang
Lencana boleh digunakan sebagai sebahagian daripada pautan atau butang untuk menyediakan kaunter.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">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.
Diposisikan
Gunakan utiliti untuk mengubah suai .badge
dan meletakkannya di sudut pautan atau butang.
<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 boleh menggantikan .badge
kelas dengan beberapa lagi utiliti tanpa mengira penunjuk yang lebih generik.
<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 utiliti latar belakang kami untuk menukar rupa lencana dengan cepat. Sila ambil perhatian bahawa apabila menggunakan lalai Bootstrap .bg-light
, anda mungkin memerlukan utiliti warna teks seperti .text-dark
untuk penggayaan yang betul. Ini kerana utiliti latar belakang tidak menetapkan apa-apa kecuali background-color
.
<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 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 .visually-hidden
kelas.
Lencana pil
Gunakan .rounded-pill
kelas utiliti untuk menjadikan lencana lebih bulat dengan lencana yang lebih besar border-radius
.
<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>
Sass
Pembolehubah
$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;