Bootstrap 5 徽章组件教程 - 标签与状态指示器

Bootstrap 5 徽章组件

Bootstrap 5 徽章是小巧灵活的组件，用于显示计数、标签或状态指示器。

徽章组件的主要特点：

多种样式 - 实心、轮廓、药丸形状等多种样式
语义化颜色 - 使用主题颜色表示不同状态
灵活定位 - 可以附加到其他元素上
响应式设计 - 自动适应父元素大小
轻量级 - 占用空间小，不影响布局

徽章示例

主要徽章成功徽章警告徽章药丸徽章

徽章样式

实心徽章

使用 .bg-{color} 类创建实心徽章。

主要次要成功危险警告信息浅色深色

药丸形状徽章

使用 .rounded-pill 类创建药丸形状的徽章。

主要次要成功危险警告信息

<!-- 实心徽章 -->
<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning text-dark">警告</span>
<span class="badge bg-info text-dark">信息</span>
<span class="badge bg-light text-dark">浅色</span>
<span class="badge bg-dark">深色</span>

<!-- 药丸形状徽章 -->
<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-secondary">次要</span>
<span class="badge rounded-pill bg-success">成功</span>
<span class="badge rounded-pill bg-danger">危险</span>

轮廓徽章

使用边框和文本颜色类创建轮廓徽章。

主要轮廓次要轮廓成功轮廓危险轮廓警告轮廓信息轮廓深色轮廓

<!-- 轮廓徽章 -->
<span class="badge border border-primary text-primary">主要轮廓</span>
<span class="badge border border-secondary text-secondary">次要轮廓</span>
<span class="badge border border-success text-success">成功轮廓</span>
<span class="badge border border-danger text-danger">危险轮廓</span>
<span class="badge border border-warning text-warning">警告轮廓</span>
<span class="badge border border-info text-info">信息轮廓</span>

徽章大小

徽章默认大小会根据内容自动调整，但您可以使用字体大小类控制徽章尺寸。

大号徽章默认徽章小号徽章更小徽章

不同大小的药丸徽章

大号药丸默认药丸小号药丸

<!-- 不同大小的徽章 -->
<span class="badge bg-primary fs-6">大号徽章</span>
<span class="badge bg-success">默认徽章</span>
<span class="badge bg-danger fs-7">小号徽章</span>
<span class="badge bg-warning text-dark fs-8">更小徽章</span>

<!-- 不同大小的药丸徽章 -->
<span class="badge rounded-pill bg-primary fs-6">大号药丸</span>
<span class="badge rounded-pill bg-success">默认药丸</span>
<span class="badge rounded-pill bg-danger fs-7">小号药丸</span>

自定义徽章尺寸

使用内联样式或自定义CSS创建特定尺寸的徽章。

自定义尺寸小圆徽章大尺寸徽章

徽章位置

按钮中的徽章

将徽章放置在按钮内部，作为计数或状态指示器。

导航中的徽章

在导航项中添加徽章显示未读数量或状态。

<!-- 按钮中的徽章 -->
<button type="button" class="btn btn-primary">
  通知 <span class="badge bg-light text-dark ms-1">4</span>
</button>

<button type="button" class="btn btn-success">
  消息 <span class="badge bg-light text-dark ms-1">12</span>
</button>

<!-- 导航中的徽章 -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页 <span class="badge bg-light text-dark ms-1">5</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">消息 <span class="badge bg-primary ms-1">12</span></a>
  </li>
</ul>

绝对定位徽章

使用定位工具类将徽章放置在元素的角落。

带图标的徽章

在徽章中添加图标，增强视觉传达效果。

已完成推荐警告错误信息

药丸形状带图标徽章

用户购物车等待中收藏

<!-- 带图标的徽章 -->
<span class="badge bg-primary badge-with-icon">
  <i class="bi bi-check-circle"></i> 已完成
</span>

<span class="badge bg-success badge-with-icon">
  <i class="bi bi-star-fill"></i> 推荐
</span>

<span class="badge bg-warning text-dark badge-with-icon">
  <i class="bi bi-exclamation-triangle"></i> 警告
</span>

<!-- 药丸形状带图标徽章 -->
<span class="badge rounded-pill bg-primary badge-with-icon">
  <i class="bi bi-person"></i> 用户
</span>

<span class="badge rounded-pill bg-success badge-with-icon">
  <i class="bi bi-cart"></i> 购物车
</span>

仅图标徽章

创建仅包含图标的徽章，节省空间。

徽章应用场景

状态指示器

使用徽章表示元素的状态。

任务列表进行中

这是一个示例任务，使用徽章显示当前状态。

高优先级前端开发

用户界面元素

在用户界面中使用徽章增强交互体验。

邮件 3 未读

通知 12 新消息

任务 5 待完成

内容标签

使用徽章为内容添加分类标签。

文章标题

这是一篇关于Bootstrap 5徽章组件的教程文章。

Bootstrap 前端教程组件

数据可视化

使用徽章显示数值或统计数据。

访问量

1,234

用户数

567

订单数

89

交互徽章演示

动态徽章生成器

自定义创建徽章。

徽章文本

徽章颜色

徽章样式

选项

添加图标

徽章计数器

点击按钮增加徽章计数。

徽章可见性切换

控制徽章的显示和隐藏。

可见徽章

徽章使用最佳实践

语义化设计

根据内容含义选择合适的徽章颜色
成功状态使用绿色，错误状态使用红色
信息性内容使用蓝色，警告内容使用黄色
保持颜色使用的一致性

内容设计

保持徽章内容简洁明了
使用清晰的文本或图标传达信息
避免在徽章中放置过多内容
考虑徽章在不同尺寸下的可读性

可访问性

为视觉徽章提供适当的文本描述
确保徽章有足够的颜色对比度
为屏幕阅读器用户提供有意义的标签
考虑使用 visually-hidden 类提供额外信息

响应式设计

在不同屏幕尺寸上测试徽章布局
确保徽章在不同设备上正常显示
考虑在小屏幕上调整徽章大小
使用合适的断点调整徽章位置

掌握徽章后，下一步学习进度条组件

徽章是状态指示的重要元素，接下来可以学习如何使用进度条显示任务进度和状态。

学习进度条组件查看所有组件

Bootstrap5教程

Bootstrap5 徽章

Bootstrap 5 徽章