Bootstrap微章

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

  <a href="#">Inbox <span class="badge">42</span></a>

  <button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
  </button>

这里写图片描述

适配导航元素的激活状态

Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。

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

这里写图片描述

posted @ 2017-10-11 23:31  wood2012  阅读(165)  评论(0)  编辑  收藏  举报