Bootstrap 徽章与标签
徽章
徽章(Badges)主要用于突出显示新的或未读的项:
News 5Comments 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>
亲自试一试 »