Lencana

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

Pada halaman ini

Contoh

Skala lencana untuk memadankan saiz elemen induk serta-merta dengan menggunakan saiz dan emunit fon relatif. Mulai v5, lencana tidak lagi mempunyai gaya fokus atau tuding untuk pautan.

Tajuk

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 tujuannya, pengguna ini hanya akan dipersembahkan dengan kandungan lencana. Bergantung pada situasi tertentu, lencana ini mungkin kelihatan seperti perkataan atau nombor tambahan rawak di hujung 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 .badgedan 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 .badgekelas dengan beberapa utiliti lagi 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-darkuntuk penggayaan yang betul. Ini kerana utiliti latar belakang tidak menetapkan apa-apa kecuali background-color.

utama Menengah Kejayaan bahaya Amaran info Cahaya 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 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-hiddenkelas.

Lencana pil

Gunakan .rounded-pillkelas utiliti untuk menjadikan lencana lebih bulat dengan lencana yang lebih besar border-radius.

utama Menengah Kejayaan bahaya Amaran info Cahaya 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>

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;