Rozetler

Küçük sayım ve etiketleme bileşenimiz olan rozetler için belgeler ve örnekler.

Örnek

emRozetler, göreli yazı tipi boyutlandırması ve birimleri kullanılarak doğrudan üst öğenin boyutuna uyacak şekilde ölçeklenir .

Örnek başlıkYeni

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

Rozetler, bir sayaç sağlamak için bağlantıların veya düğmelerin bir parçası olarak kullanılabilir.

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

Nasıl kullanıldıklarına bağlı olarak, rozetlerin ekran okuyucu ve benzeri yardımcı teknolojilerin kullanıcıları için kafa karıştırıcı olabileceğini unutmayın. Rozetlerin tasarımı, amaçlarına ilişkin görsel bir ipucu sağlarken, bu kullanıcılara basitçe rozetin içeriği sunulacaktır. Belirli duruma bağlı olarak, bu rozetler bir cümlenin, bağlantının veya düğmenin sonunda rastgele ek kelimeler veya sayılar gibi görünebilir.

Bağlam net değilse ("4"ün bildirim sayısı olduğunun anlaşıldığı "Bildirimler" örneğinde olduğu gibi), görsel olarak gizlenmiş bir ek metin parçasıyla ek bağlam eklemeyi düşünün.

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

bağlamsal varyasyonlar

Bir rozetin görünümünü değiştirmek için aşağıda belirtilen değiştirici sınıflardan herhangi birini ekleyin.

Öncelik İkincil Başarı Tehlike Uyarı Bilgi Işık Karanlık

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

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

hap rozetleri

.badge-pillRozetleri daha yuvarlak hale getirmek için değiştirici sınıfını kullanın (daha büyük border-radiusve ek yatay ile padding). v3'teki rozetleri kaçırırsanız kullanışlıdır.

Öncelik İkincil Başarı Tehlike Uyarı Bilgi Işık Karanlık

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

Bağlantılar

Bir öğe üzerinde bağlamsal .badge-*sınıfları kullanmak, <a>hızlı bir şekilde üzerinde durma ve odaklanma durumlarıyla eyleme geçirilebilir rozetler sağlar.

Öncelik İkincil Başarı Tehlike Uyarı Bilgi Işık Karanlık

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