Bootstrap 徽章（Badges）

作者likuolei

在 Bootstrap 5（包括最新版本 5.3.3，截至 2025 年 10 月 11 日），徽章（Badges） 是其组件库中的一个轻量级组件，用于显示小型、醒目的标记或计数器，通常用于突出显示状态、数量或分类信息。徽章与标签（Labels）在早期版本（如 Bootstrap 3）中功能类似，但在 Bootstrap 5 中统一称为 Badges，并进行了优化。它们常与按钮、导航、标题或其他元素结合使用，适用于通知、新消息或状态标记等场景。以下是对Bootstrap 徽章的中文讲解，涵盖核心功能、类名、用法和示例。

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>
  <button type="button" class="btn btn-success">
    通知 <span class="badge bg-dark">10</span>
  </button>

(4) 结合标题

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

  • 用法：
  <h1>标题 <span class="badge bg-info">新</span></h1>
  <h2>标题 <span class="badge bg-warning">警告</span></h2>

(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>
  <span class="badge bg-success d-inline d-md-none">仅小屏幕显示</span>

3. 动态徽章

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

  • 示例：
  const badge = document.querySelector('.badge');
  let count = 5;
  badge.textContent = `新消息: ${count}`;
  badge.classList.add('bg-primary'); // 动态添加背景色

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. 完整示例

以下是一个展示各种徽章用法的综合示例：

<!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>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h2 class="text-center">Bootstrap 徽章示例</h2>

    <!-- 基本徽章 -->
    <h4>基本徽章</h4>
    <span class="badge bg-primary">主要</span>
    <span class="badge bg-secondary">次要</span>
    <span class="badge bg-success">成功</span>
    <span class="badge bg-danger">危险</span>

    <!-- 结合标题 -->
    <h4>结合标题</h4>
    <h1>标题 <span class="badge bg-info">新</span></h1>
    <h2>标题 <span class="badge bg-warning">警告</span></h2>

    <!-- 结合按钮 -->
    <h4>结合按钮</h4>
    <button type="button" class="btn btn-primary">
      消息 <span class="badge bg-light text-dark">4</span>
    </button>
    <button type="button" class="btn btn-success">
      通知 <span class="badge bg-dark">10</span>
    </button>

    <!-- 胶囊徽章 -->
    <h4>胶囊徽章</h4>
    <span class="badge rounded-pill bg-primary">主要</span>
    <span class="badge rounded-pill bg-danger">危险</span>

    <!-- 响应式徽章 -->
    <h4>响应式徽章</h4>
    <span class="badge bg-primary d-none d-md-inline">仅中等屏幕显示</span>
    <span class="badge bg-success d-inline d-md-none">仅小屏幕显示</span>

    <!-- 计数器徽章 -->
    <h4>计数器徽章</h4>
    <a href="#" class="position-relative">
      收件箱
      <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">99+</span>
    </a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

6. 注意事项

  • 可访问性：为徽章添加 aria-label 或 aria-hidden="true"（如果仅装饰用）以支持屏幕阅读器。
  <span class="badge bg-primary" aria-label="未读消息计数">5</span>
  • 颜色对比：确保背景色（如 .bg-dark）与文字色（如 .text-light）对比度符合 WCAG 标准。
  • 响应式测试：在小屏幕上测试徽章，确保不溢出或影响布局。
  • 性能：避免过多徽章堆叠，保持 DOM 简洁。
  • 动态更新：动态生成徽章时，确保内容和样式一致。

7. 与早期版本的区别

  • Bootstrap 3：使用 .label 类（如 .label-primary），现已废弃。
  • Bootstrap 4/5：统一为 .badge，移除 .label，并使用 .bg-* 替代主题类，更加模块化。

8. 学习资源

  • 官方文档：https://getbootstrap.com/docs/5.3/components/badge/
  • 中文教程：https://www.bootcss.com/（非官方，可能包含旧版信息）
  • X 平台：搜索“Bootstrap 徽章”或“Bootstrap Badges”，查看社区分享的设计技巧。

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

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注