Bootstrap 徽章

定义和使用

徽章用于将附加信息添加到任何内容；在<span>元素中将 .badge 类与上下文类（例如.badge-secondary）一起使用，以创建矩形标记。

请注意，徽章会缩放以匹配父元素的大小（如果有）：

<div class="container">
   <h1>标题内容 <span class="badge badge-secondary">New</span></h1>
   <h2>标题内容 <span class="badge badge-secondary">New</span></h2>
   <h3>标题内容 <span class="badge badge-secondary">New</span></h3>
   <h4>标题内容 <span class="badge badge-secondary">New</span></h4>
   <h5>标题内容 <span class="badge badge-secondary">New</span></h5>
   <h6>标题内容 <span class="badge badge-secondary">New</span></h6>
</div>

尝试一下

输出结果如下：

标题内容 New

徽章颜色

使用类（.badge- *）来更改徽章的颜色：

<div class="container">
   <span class="badge badge-primary">Primary</span>
   <span class="badge badge-secondary">Secondary</span>
   <span class="badge badge-success">Success</span>
   <span class="badge badge-danger">Danger</span>
   <span class="badge badge-warning">Warning</span>
   <span class="badge badge-info">Info</span>
   <span class="badge badge-light">Light</span>
   <span class="badge badge-dark">Dark</span>
</div>

尝试一下

输出结果如下：

Primary Secondary Success Danger Warning Info Light Dark

圆丸形徽章

使用 .badge-pill 类设置徽章成丸形状：

<div class="container">
   <span class="badge badge-pill badge-primary">Primary</span>
   <span class="badge badge-pill badge-secondary">Secondary</span>
   <span class="badge badge-pill badge-success">Success</span>
   <span class="badge badge-pill badge-danger">Danger</span>
   <span class="badge badge-pill badge-warning">Warning</span>
   <span class="badge badge-pill badge-info">Info</span>
   <span class="badge badge-pill badge-light">Light</span>
   <span class="badge badge-pill badge-dark">Dark</span>
</div>

尝试一下

输出结果如下：

Primary Secondary Success Danger Warning Info Light Dark

元素内的徽章

在按钮内使用徽章的示例：

<div class="container">
 <button type="button" class="btn btn-primary">
   消息 <span class="badge badge-light">4</span>
 </button>
</div>

尝试一下

输出结果如下：

定义和使用

徽章颜色

圆丸形徽章

元素内的徽章

相关页面