徽章 - 零件

徽章的文档和示例,我们的小计数和标签组件。

例子

徽章可以用作链接或按钮的一部分来提供计数器。

<button type="button" class="btn btn-primary">
   通知  <span class="badge badge-default">4</span>
</button>

情境变化

添加以下任何修饰符类以更改徽章的外观。

信息 成功 危险 警告 默认
<span class="badge badge-primary"></span>
<span class="badge badge-info">信息</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-default">默认</span>

丸徽章

使用.badge-pill修饰符类使徽章更圆(使用更大的border-radius和额外的水平padding)。 如果你错过了v3的徽章,这很有用。

信息 成功 危险 警告 默认
<span class="badge badge-pill badge-primary"></span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-danger">危险</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-default">默认</span>

链接颜色

<a>元素上使用上下文.badge-类可以快速提供带有悬停和焦点状态的_actionable_标记。

<a href="#" class="badge badge-primary"></a>
<a href="#" class="badge badge-info">信息</a>
<a href="#" class="badge badge-success">成功</a>
<a href="#" class="badge badge-danger">危险</a>
<a href="#" class="badge badge-warning">警告</a>
<a href="#" class="badge badge-default">默认</a>