Bootstrap badge (badges). Badges are similar to labels, and the main difference is that the edges of the badges are more rounded.
Badges (badges) are primarily used to highlight new or unread items. To use badges, simply add the <span class= "badge" > to these elements such as links, Bootstrap navigation, and so on.
The following example demonstrates this:
<! DOCTYPE html>
The results are as follows:
When there are no new or unread items, through CSS : The empty selector, the badge folds up to indicate that there is no content inside.
Activating navigation StateYou can place badges in the capsule navigation and list navigation in the activation state. Activate the link by using <span class= "badge" > , as shown in the following example:
<! DOCTYPE html>Home Page</a> </li> <li><a href= "#" > Introduction </a></li> <li> <a href= "#" > <span class= "badge pull-right" >3</span>message</a> </li></ul></body>The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overviewbootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < basics 21 > badges (Badges)Bootstrap < Fundamentals 21 > Badge (badges)