Bootstrap 徽章

使用 Bootstrap 创建徽章组件的方法

问题

如何使用 Bootstrap 创建徽章（Badge）组件？

解答

基础徽章

使用 .badge 类创建基础徽章：

<!-- 基础徽章 -->
<span class="badge vqj0f">Primary</span>
<span class="badge bk6r6">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>

药丸形徽章

添加 .rounded-pill 类创建圆角药丸形状：

<!-- 药丸形徽章 -->
<span class="badge rounded-pill vqj0f">99+</span>
<span class="badge rounded-pill bg-danger">New</span>

按钮中的徽章

常用于显示通知数量：

<!-- 按钮内嵌徽章 -->
<button type="button" class="btn btn-primary">
  消息 <span class="badge bg-light text-dark">4</span>
</button>

<!-- 带定位的通知徽章 -->
<button type="button" class="btn btn-primary position-relative">
  收件箱
  <span class="position-absolute v765i mlkxf translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">未读消息</span>
  </span>
</button>

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 徽章示例</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
  
  <!-- 标题中的徽章 -->
  <h3>文章标题 <span class="badge bk6r6">New</span></h3>
  
  <!-- 各种颜色徽章 -->
  <div class="g2dki">
    <span class="badge vqj0f">主要</span>
    <span class="badge bg-success">成功</span>
    <span class="badge bg-danger">危险</span>
  </div>
  
  <!-- 药丸形徽章 -->
  <div class="g2dki">
    <span class="badge rounded-pill bg-info">标签</span>
    <span class="badge rounded-pill bg-warning text-dark">待处理</span>
  </div>
  
  <!-- 按钮徽章 -->
  <button type="button" class="btn btn-primary position-relative">
    通知
    <span class="position-absolute v765i mlkxf translate-middle badge rounded-pill bg-danger">
      5
    </span>
  </button>

</body>
</html>

关键点

使用 .badge 类创建徽章，配合 bg-* 设置背景色
.rounded-pill 创建药丸形圆角徽章
浅色背景需添加 text-dark 保证文字可读
结合 position-* 和 translate-middle 实现定位徽章
使用 .visually-hidden 为屏幕阅读器提供无障碍文本