W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 徽章



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


实例

News 5
Comments 10
Updates 2

上面的数字 (5, 10, 和 2) 就是徽章。

使用 .badge 类放在 <span> 元素中便可以创建一个徽章:

Example

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
尝试一下 »

徽章也可用于其他元素,如按钮:



下面的示例演示了如何向按钮添加徽章:

Example

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
尝试一下 »
Note 提示: 徽章组件在 Internet Explorer 8 浏览器中不会自动消失,因为 IE8 不支持 :empty 选择符。