Bootstrap徽章Badges使用方法

颜诗雅

版主

社区管理 ⚔青铜 镖丁 ☯化神

教程分享 126 浏览 1 回复

详情摘要

【总结】Bootstrap的徽章用于添加额外信息，用span标签加.badge类和.bg-*类可制作不同颜色的矩形徽章，徽章会自动调整大小以适应父元素。

徽章（Badges）用于向内容添加附加信息。在span元素中使用.badge类和上下文类（如.bg-secondary）来创建矩形徽章，徽章会缩放以匹配父元素大小。

<div class="container mt-3">
  <h2>徽章</h2>
  <h1>Example heading <span class="badge bg-secondary">New</span></h1>
  <h2>Example heading <span class="badge bg-secondary">New</span></h2>
  <h3>Example heading <span class="badge bg-secondary">New</span></h3>
  <h4>Example heading <span class="badge bg-secondary">New</span></h4>
</div>

上下文徽章使用任意.bg-*类更改徽章颜色：bg-primary、bg-success、bg-danger、bg-warning、bg-info等。

教程