最新的Web开发教程
 

Bootstrap Badges and Labels


徽章

徽章是多少项与链接相关的数字指标:

新闻5
评论10
更新2

的数字(5,10,和2)的徽章。

使用.badge内的类<span>元素,创造徽章:

<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>
试一试»

徽章也可以其它元件,如按钮内使用:



下面的例子说明如何徽章添加按钮:

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
试一试»

标签

标签是用来提供一些附加信息:

例如

例如

例如

例如

例如
例如

使用.label类,接着的六个上下文类之一.label-default.label-primary.label-success.label-info.label-warning.label-danger ,一内<span>元素创建标签:

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
试一试»

下面的例子显示了所有的上下文标注类:

默认标签 主标签 成功标签 信息标签 警告标签 危险标签

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4»