在 Bootstrap 5（包括最新版本 5.3.3，截至 2025 年 10 月 11 日），标签（Badges） 是其组件库中的一个轻量级组件，用于在页面中显示小型、醒目的标记或计数器，常用于突出显示状态、数量或分类信息。标签通常与按钮、导航、标题或其他元素结合使用，适合显示通知、新消息或状态标签等。以下是对 Bootstrap 标签的中文讲解，涵盖核心功能、类名、用法和示例。

Bootstrap 标签示例

Bootstrap 标签示例

基本标签

主要次要成功危险

结合标题

标题 新

标题 警告

结合按钮

消息 4 通知 10

胶囊标签

主要危险

响应式标签

仅中等屏幕显示仅小屏幕显示

计数器标签

收件箱 99+

---

1. Bootstrap 标签概述

Bootstrap 的标签（Badges）是一种小型、行内的视觉元素，用于显示简短的信息或状态。其主要特点包括：

• 轻量级：仅依赖 CSS，无需 JavaScript。
• 多用途：可用于通知计数、状态标记、分类标签等。
• 响应式：支持响应式工具类，适配不同屏幕尺寸。
• 可访问性：结合 ARIA 属性，优化屏幕阅读器体验。
• 可定制：通过 Sass 变量或 CSS 调整样式。

标签通常使用 <span> 或其他行内元素，结合 .badge 类和背景色类（如 .bg-primary）实现。

---

2. 核心标签类

以下是Bootstrap 标签的主要类和用法：

(1) 基本标签

使用 .badge 和背景色类（如 .bg-primary、.bg-success）创建标签。

• 用法：

  <span class="badge bg-primary">主要</span>
  <span class="badge bg-success">成功</span>
  <span class="badge bg-danger">危险</span>

• 背景色类：
• .bg-primary
• .bg-secondary
• .bg-success
• .bg-danger
• .bg-warning
• .bg-info
• .bg-light
• .bg-dark

(2) 胶囊标签

使用 .rounded-pill 创建圆角更大的胶囊状标签。

• 用法：

  <span class="badge rounded-pill bg-primary">主要</span>
  <span class="badge rounded-pill bg-danger">危险</span>

(3) 结合按钮

标签常用于按钮中，显示计数或状态。

• 用法：

  <button type="button" class="btn btn-primary">
    消息 <span class="badge bg-light text-dark">4</span>
  </button>

(4) 结合标题

标签可以嵌入标题，突出显示新内容或状态。

• 用法：

  <h1>标题 <span class="badge bg-info">新</span></h1>

(5) 计数器标签

使用定位类（如 .position-absolute）创建通知计数器，常见于导航或图标。

• 用法：

  <a href="#" class="position-relative">
    收件箱
    <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">99+</span>
  </a>

• 定位类：
• .position-absolute：绝对定位。
• .top-0、.start-100：定位到右上角。
• .translate-middle：居中调整。

(6) 响应式标签

结合响应式工具类控制标签在不同屏幕尺寸的显示。

• 用法：

  <span class="badge bg-primary d-none d-md-inline">仅中等屏幕显示</span>

---

3. 动态标签

标签通常是静态的，但在动态场景中，可通过 JavaScript 动态更新内容。

• 示例：

  const badge = document.querySelector('.badge');
  let count = 5;
  badge.textContent = `新消息: ${count}`;

---

4. 定制标签

标签的样式基于 Sass 变量和 CSS 变量，可通过以下方式定制：

• 背景：$badge-bg。
• 字体：$badge-font-size、$badge-font-weight。
• 内边距：$badge-padding-x、$badge-padding-y。
• 圆角：$badge-border-radius。

定制示例：

// custom.scss
$badge-bg: #ff5733;
$badge-font-size: 0.9rem;
$badge-border-radius: 0.3rem;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

---

5. 注意事项

• 可访问性：为标签添加 aria-label 或 aria-hidden="true"（如果仅装饰用）以支持屏幕阅读器。

  <span class="badge bg-primary" aria-label="新消息计数">5</span>

• 响应式测试：在小屏幕上测试标签的显示效果，确保不溢出。
• 性能：避免过多标签堆叠，保持 DOM 简洁。
• 颜色对比：确保背景色（如 .bg-dark）与文字色（如 .text-light）对比度符合 WCAG 标准。
• 动态更新：动态生成标签时，确保内容和样式一致。

---

6. 学习资源

• 官方文档：https://getbootstrap.com/docs/5.3/components/badge/
• 中文教程：https://www.bootcss.com/（非官方）
• X 平台：搜索“Bootstrap 标签”或“Bootstrap Badges”，查看社区分享的设计技巧。

如果你需要更详细的标签讲解（例如动态计数、结合复杂组件）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！