Bootstrap Badges
This chapter will discuss about Bootstrap badges. Badges are similar to labels; the primary difference is that the corners are more rounded.
Badges are mainly used to highlight new or unread items. To use badges just add <span class="badge"> to links, Bootstrap navs, and more.
The following example demonstrates this:
<a href="#">Mailbox <span class="badge">50</span></a>
When there are no new or unread items, badges will simply collapse via CSS's :empty selector provided no content exists within.
Active nav states
You can place badges in active states of pill and list navigations. You can achieve this by placing<span class="badge"> to active links, as demonstrated in the following example:
<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>
ليست هناك تعليقات:
إرسال تعليق