当前位置:首页 > BootStrap > 正文内容
七月22日

时间:2016-07-22 09:43

Bootstrap教程:徽章(Badges)

0
分类:BootStrap | 评论:0人 | 浏览:79次   

 

给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 <span class="badge">添加到链接、Bootstrap 导航等这些元素上即可。

  1.  <a href="#">Inbox <span class="badge">42</span></a>
  2. 
    
  3.   <button class="btn btn-primary" type="button">
  4.   Messages <span class="badge">4</span>
  5. </button>

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 来激活链接,如下面的实例所示:

胶囊式导航中的激活状态

列表导航中的激活状态

  1. <h4>胶囊式导航中的激活状态</h4>
  2. <ul class="nav nav-pills">
  3.    <li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
  4.    <li><a href="#">简介</a></li>
  5.    <li><a href="#">消息 <span class="badge">3</span></a></li>
  6. </ul>
  7. <br>
  8. <h4>列表导航中的激活状态</h4>
  9. <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
  10.    <li class="active">
  11.       <a href="#"> <span class="badge pull-right">42</span> 首页 </a>
  12.    </li>
  13.    <li><a href="#">简介</a></li>
  14.    <li> <a href="#"> <span class="badge pull-right">3</span> 消息 </a>
  15.    </li>
  16. </ul>

Self collapsing

如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现) 。

跨浏览器兼容性

徽章组件在 Internet Explorer 8 浏览器中不会自动消失,因为 IE8 不支持 :empty 选择符。

适配导航元素的激活状态

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

实例:

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

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量