Rozetler
Küçük sayım ve etiketleme bileşenimiz olan rozetler için belgeler ve örnekler.
emRozetler, göreli yazı tipi boyutlandırması ve birimleri kullanılarak doğrudan üst öğenin boyutuna uyacak şekilde ölçeklenir .
<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>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.
<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.
.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.
<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>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.
<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>