Bootstrap 2 内联标签和徽章 - Bootstrap 2 基础教程

Bootstrap 内置了内联标签和徽章效果模块，本节我们将会学习如何使用 Bootstrap 创建内联标签和徽章

内联标签就是 Label 和注释的文本

徽章指的是指标和未读计数

Bootstrap 内联标签

Bootstrap 2 inline label demo

Bootstrap .label CSS 类可以创建内联标签

<p><span class="label">默认</span></p>

运行范例 »

各种内联标签样式

Bootstrap 2 inline label demo

Bootstrap 内置了很多的内联标签样式

label-success 成功
label-warning 警告
label-important 重要
label-info 信息
label-inverse 反选

<p><span class="label">默认</span></p>
<p><span class="label label-success">成功</span></p>
<p><span class="label label-warning">警告</span></p>
<p><span class="label label-important">重要</span></p>
<p><span class="label label-info">信息</span></p>
<p><span class="label label-inverse">反选</span></p>

运行范例 »

徽章

徽章是用于显示指标或一些分类的计数的小而简单的组件它们通常可以在用于推送通知的电子邮件客户端比如 Mail.app 或移动 app 上找到

Bootstrap 3 inline label demo

Bootstrap .badge CSS 类用于将一个 <span> 显示为微章

Bootstrap 内置了很多的微章样式

.badge-success 成功
.badge-warning 警告
.badge-important 重要
.badge-info 信息
.badge-inverse 反选

<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>

运行范例 »