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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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 .badgedan meletakkannya di sudut pautan atau butang.

html

<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 lagi utiliti tanpa mengira penunjuk yang lebih generik.

html

<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

Ditambah dalam v5.2.0

Tetapkan background-colordengan latar depan yang berbeza colordengan pembantu kami.text-bg-{color} . Sebelum ini ia dikehendaki untuk memasangkan pilihan anda .text-{color}dan .bg-{color}utiliti secara manual untuk penggayaan, yang masih boleh anda gunakan jika anda mahu.

utama Menengah Kejayaan bahaya Amaran info Cahaya Gelap

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

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

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, lencana kini menggunakan pembolehubah CSS tempatan .badgeuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Pembolehubah Sass

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