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

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>

Düğmeler

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

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>

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

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>

Arka plan renkleri

v5.2.0'da eklendi

Yardımcılarımızla zıt bir background-colorön plana colorsahip olun . Önceden, tercih ettiğiniz takdirde hala kullanabileceğiniz, stil seçiminizi ve yardımcı programları manuel olarak eşleştirmeniz gerekiyordu..text-bg-{color}.text-{color}.bg-{color}

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

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>

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

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

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, rozetler artık .badgegelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$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};

Sas değişkenleri

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