Rozetler
Rozetler bir bağlantıyla ilişkili kaç tane öğenin sayısal göstergeler şunlardır:
haber 510 Yorumlar
Güncellemeler 2
Numaraları (5, 10, and 2) rozetler.
Kullanım .badge
içinde sınıfını <span>
rozetleri oluşturmak için elemanlar:
Ö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>
Kendin dene " Rozetler da düğmeler gibi diğer öğelerinin içinde kullanılabilir:
Aşağıdaki örnek düğmelere rozetleri nasıl ekleneceğini gösterir:
Örnek
<button type="button" class="btn btn-primary">Primary <span
class="badge">7</span></button>
Kendin dene " Etiketler
Etiketler şey hakkında ek bilgi sağlamak için kullanılır:
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Örnek Yeni
Kullanım .label
altı bağlamsal sınıflardan birinde izledi sınıfı .label-default
, .label-primary
, .label-success
, .label-info
, .label-warning
veya .label-danger
bir mesafede, <span>
elemanı etiket oluşturmak için:
Ö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>
Kendin dene " Aşağıdaki örnek, tüm içeriksel etiket sınıflarını gösterir:
Varsayılan Etiket İlköğretim Etiket Başarı Etiket Bilgisi Etiket 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>
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»