En son web geliştirme öğreticiler
 

Bootstrap Badges and Labels


Rozetler

Rozetler bir bağlantıyla ilişkili kaç tane öğenin sayısal göstergeler şunlardır:

haber 5
10 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»