Bootstrap-v3-组件-徽章

徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

1、实例

在链接/按钮上显示徽章。

<!-- 徽章 -->
<!-- 链接中展示徽章 -->
<a href="#">未读消息 <span class="badge">20</span></a>  

<!-- 按钮中展示徽章 -->
<button class="btn btn-primary" type="button">
  未读消息 <span class="badge">4</span>
</button>

2、适配导航元素的激活状态

<!-- 适配导航元素的激活状态 -->
<ul class="nav nav-pills">
  <li class="active"><a href="#">首页 <span class="badge">20</span></a></li>
  <li ><a href="#">简介</a></li>
  <li ><a href="#">消息 <span class="badge">3</span></a></li>
</ul>