本章将讨论Bootstrap徽章.徽章与标签类似;主要区别在于角落更圆润.
徽章主要用于突出显示新的或未读的项目.要使用徽章,只需将< span class ="badge"> 添加到链接,Bootstrap导航等.
以下示例演示了此 :
<a href = "#">Mailbox <span class = "badge">50</span></a>
如果没有新的或未读的商品,只要没有内容存在,徽章就会通过CSS的:空选择器崩溃.
您可以将徽章置于活动状态的丸和列表导航中.您可以通过将< span class ="badge"> 放置到活动链接来实现此目的,如以下示例所示 :
<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>