Önyükleme Rozetleri ve Etiketleri
Rozetler
Rozetler, bir bağlantıyla kaç öğenin ilişkilendirildiğinin sayısal göstergeleridir:
Haberler 5Yorumlar 10
güncellemeler 2
Rakamlar (5, 10 ve 2) rozetlerdir.
Rozetler oluşturmak için öğelerin .badgeiçindeki sınıfı kullanın :<span>
Örnek
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Rozetler, düğmeler gibi diğer öğelerin içinde de kullanılabilir:
Aşağıdaki örnek, düğmelere nasıl rozet ekleneceğini gösterir:
Örnek
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Etiketler
Etiketler, bir şey hakkında ek bilgi sağlamak için kullanılır:
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Bir etiket oluşturmak için bir öğe içinde .labelsınıfı ve ardından altı bağlamsal sınıftan .label-default, .label-primary, .label-success,
.label-info, .label-warningveya , kullanın:.label-danger<span>
Örnek
<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
Aşağıdaki örnek, tüm bağlamsal etiket sınıflarını gösterir:
Varsayılan Etiket
Birincil Etiket
Başarı Etiketi
Bilgi Etiketi
Uyarı Etiketi
Tehlike Etiketi
Örnek
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>