Bootstrap 徽章与标签


徽章

徽章(Badges)主要用于突出显示新的或未读的项:

News 5
Comments 10
Updates 2

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

使用 <span> 元素中的 .badge 类创建徽章:

实例

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


标签

标签可用于计数、提示或页面上其他的标记显示。用于提供有关某事物的附加信息:

示例 New

示例 New

示例 New

示例 New

示例 New
示例 New

使用 .label 类,然后是 <span> 元素中六个上下文类 .label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger, within a <span> 中的一个来创建标签:

实例

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

以下示例显示了所有上下文标签类:

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

实例

<span class="label label-default">默认标签</span>
<span class="label label-primary">主标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
亲自试一试 »

学习训练

练习题:

在 "Comments" 文本之后,使用span元素制作一个内部带有数字 2 的徽章。

<button>Comments </button>

开始实验