.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #999; border-radius: 10px; }
同样也使用`:empty`伪元素，当没有内容的时候隐藏：
.badge:empty { display: none; }
正如开头所说，可以将徽章与按钮或者导航之类配合使用：
<div role="navigation"> <div> <a href="##">慕课网</a> </div> <ul> <li><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例<span>23</span></a></li> <li><a href="##">关于我们</a></li> </ul> </div>
运行效果
2）、按钮和胶囊形导航设置徽章：
另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：
<ul> <li><a href="#">Home <span>42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span>3</span></a></li> </ul> <br />
运行效果:
样式代码请查看bootstrap.css文件第4345行～第4366行。
注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
您可能感兴趣的文章: