徽章 - 临 零件
徽章的文档和示例,我们的小计数和标签组件。
例子
徽章可以用作链接或按钮的一部分来提供计数器。
<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>