Bootstrap 列表组

在 Bootstrap 5.3.3（截至 2025 年 10 月 11 日的最新版本），列表组（List Group） 是一个灵活且功能强大的组件，用于展示一系列内容，如菜单、任务列表、选项或通知。列表组支持多种样式（带徽章、链接、按钮等）、交互功能（激活、禁用、动态内容）和响应式布局。以下是对 Bootstrap 列表组的中文讲解，涵盖核心功能、类名、用法和示例。

1. Bootstrap 列表组概述

Bootstrap 的列表组（List Group）用于创建有序或无序的内容列表，常用于：

导航菜单：如侧边栏导航。
内容展示：如消息列表或待办事项。
交互组件：如选项卡或可点击项目。

主要特点：

轻量级：主要依赖 CSS，交互功能需 JavaScript。
主题化：支持多种颜色主题和样式。
交互性：支持激活、禁用、链接和按钮。
响应式：结合栅格系统和工具类适配不同屏幕。
可访问性：内置 ARIA 属性，优化屏幕阅读器体验。

列表组通常由 <ul>、<ol> 或 <div> 组成，结合 .list-group 和 .list-group-item 类实现。

2. 核心列表组类

以下是 Bootstrap 列表组的主要类和用法：

(1) 基本列表组

使用 .list-group 和 .list-group-item 创建简单的列表组。

用法：

  <ul class="list-group">
    <li class="list-group-item">项目 1</li>
    <li class="list-group-item">项目 2</li>
    <li class="list-group-item">项目 3</li>
  </ul>

注意：可用 <div> 替代 <ul>，但需为每个子项添加 .list-group-item。

(2) 激活和禁用状态

激活：使用 .active 高亮当前项。
禁用：使用 .disabled 禁用交互（需搭配 <a> 或 <button>）。
用法：

  <ul class="list-group">
    <li class="list-group-item active" aria-current="true">激活项目</li>
    <li class="list-group-item">普通项目</li>
    <li class="list-group-item disabled" aria-disabled="true">禁用项目</li>
  </ul>

可访问性：
aria-current="true"：标记当前项。
aria-disabled="true"：标记禁用状态。

(3) 链接和按钮

列表组项可以是链接（<a>）或按钮（<button>）。

用法：

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">激活链接</a>
    <a href="#" class="list-group-item list-group-item-action">普通链接</a>
    <button type="button" class="list-group-item list-group-item-action">按钮项目</button>
  </div>

类说明：
.list-group-item-action：为链接或按钮添加悬停和点击效果。

(4) 主题化

使用上下文类（如 .list-group-item-primary）改变列表项的背景和文字颜色。

用法：

  <ul class="list-group">
    <li class="list-group-item list-group-item-primary">主要</li>
    <li class="list-group-item list-group-item-success">成功</li>
    <li class="list-group-item list-group-item-danger">危险</li>
  </ul>

上下文类：
.list-group-item-primary
.list-group-item-success
.list-group-item-danger
.list-group-item-warning
.list-group-item-info
.list-group-item-secondary
.list-group-item-light
.list-group-item-dark

(5) 带徽章的列表组

结合 .badge 显示计数或状态。

用法：

  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      消息
      <span class="badge bg-primary rounded-pill">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      通知
      <span class="badge bg-danger rounded-pill">10</span>
    </li>
  </ul>

(6) 水平列表组

使用 .list-group-horizontal 或 .list-group-horizontal-{breakpoint} 实现水平排列。

用法：

  <ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">项目 1</li>
    <li class="list-group-item">项目 2</li>
    <li class="list-group-item">项目 3</li>
  </ul>

(7) 响应式列表组

结合栅格系统或工具类（如 .d-none、.d-md-block）控制显示。

用法：

  <ul class="list-group d-none d-md-block">
    <li class="list-group-item">仅中等屏幕显示</li>
  </ul>

3. 完整示例

以下是一个综合示例，展示多种列表组风格，包括基本、带徽章、链接、水平和响应式列表组：

Bootstrap 列表组示例

基本列表组

项目 1
项目 2（激活）
项目 3

带链接和按钮

激活链接普通链接按钮项目

主题化列表组

主要
成功
危险

带徽章

消息 4
通知 10

水平列表组

项目 1
项目 2
项目 3

响应式列表组

仅中等屏幕显示
项目 2

4. 动态列表组

列表组通常是静态的，但可通过 JavaScript 动态生成或更新。

示例（动态添加列表项）：

  const listGroup = document.querySelector('.list-group');
  const items = ['新项目 1', '新项目 2'];
  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.className = `list-group-item ${index === 0 ? 'active' : ''}`;
    li.textContent = item;
    if (index === 0) li.setAttribute('aria-current', 'true');
    listGroup.appendChild(li);
  });

5. 定制列表组

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

背景和颜色：$list-group-bg、$list-group-item-bg-scale。
边框：$list-group-border-color、$list-group-border-radius。
间距：$list-group-item-padding-x、$list-group-item-padding-y。
悬停效果：$list-group-action-hover-bg。

Sass 定制示例：

// custom.scss
$list-group-bg: #f8f9fa;
$list-group-border-color: #007bff;
$list-group-border-radius: 0.5rem;

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

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

6. 注意事项

可访问性：
使用 role="list" 或 aria-current="true" 确保屏幕阅读器支持。
为禁用项添加 aria-disabled="true"。
JavaScript 依赖：交互功能（如选项卡切换）需引入 bootstrap.bundle.min.js。
颜色对比：确保主题色（如 .list-group-item-dark）与文字色的对比度符合 WCAG 标准。
响应式测试：在小屏幕上测试水平列表组和响应式显示效果。
性能：避免过多动态列表项，保持 DOM 简洁。

7. 与早期版本的区别

Bootstrap 3：
使用 .list-group-item-heading 和 .list-group-item-text 结构化内容。
较少工具类支持。
Bootstrap 4/5：
移除特定内容类，推荐 Flexbox 和工具类。
增强水平列表组和交互功能。

8. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/components/list-group/
中文教程：https://www.bootcss.com/（非官方，可能包含旧版信息）
X 平台：搜索“Bootstrap 列表组”或“Bootstrap List Group”查看社区分享。

如果你需要更详细的列表组讲解（例如结合选项卡、动态加载）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！