Bootstrap - Rozetler

Bu bölümde Bootstrap rozetleri anlatılacaktır. Rozetler etiketlere benzer; temel fark, köşelerin daha yuvarlak olmasıdır.

Rozetler genellikle yeni veya okunmamış öğeleri vurgulamak için kullanılır. Rozetleri kullanmak için şunu ekleyin:<span class = "badge"> bağlantılara, Bootstrap gezinmelerine ve daha fazlasına.

Aşağıdaki örnek bunu göstermektedir -

<a href = "#">Mailbox <span class = "badge">50</span></a>

Yeni veya okunmamış öğe olmadığında, rozetler CSS'ler aracılığıyla :empty seçici, içinde içerik olmaması koşuluyla.

Etkin Gezinme Durumları

Rozetleri aktif hap durumlarına yerleştirebilir ve gezinmeleri listeleyebilirsiniz. Bunu yerleştirerek başarabilirsiniz<span class = "badge"> aşağıdaki örnekte gösterildiği gibi aktif bağlantılara -

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>