Rozetler

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

Bu sayfada

Örnekler

emRozetler, göreli yazı tipi boyutlandırması ve birimleri kullanılarak doğrudan üst öğenin boyutuna uyacak şekilde ölçeklenir . V5'ten itibaren, rozetlerde artık bağlantılar için odak veya fareyle üzerine gelme stilleri yoktur.

Başlıklar

Örnek başlıkYeni

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

Düğmeler

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 bg-secondary">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.

Konumlandırılmış

a'yı değiştirmek .badgeve bir bağlantının veya düğmenin köşesine yerleştirmek için yardımcı programları kullanın.

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

Ayrıca, .badgedaha genel bir gösterge için sayım yapmadan sınıfı birkaç yardımcı programla değiştirebilirsiniz.

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

Arka plan renkleri

Bir rozetin görünümünü hızla değiştirmek için arka plan yardımcı sınıflarımızı kullanın. Bootstrap'in varsayılanını kullanırken , uygun stil için .bg-lightbüyük olasılıkla bir metin rengi yardımcı programına ihtiyacınız olacağını unutmayın. .text-darkBunun nedeni, arka plan yardımcı programlarının background-color.

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

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

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 .visually-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

hap rozetleri

.rounded-pillRozetleri daha büyük bir border-radius.

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

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

küstah

Değişkenler

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