Bootstrap 列表组

Bootstrap 列表组 (List Groups)

基本列表组

列表组（List groups）是一种灵活且强大的组件，用于展示一系列内容。最基本的列表组是一个无序列表（unordered list），其中的列表项（list items）由 Bootstrap 进行样式美化。

• 第一项
• 第二项
• 第三项

要创建一个基本列表组，请使用带有 .list-group 类的 <ul> 元素，以及带有 .list-group-item 类的 <li> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <ul class="list-group">
      <li class="list-group-item">First item</li>
      <li class="list-group-item">Second item</li>
      <li class="list-group-item">Third item</li>
    </ul>
  </div>
</body>
</html>

带徽章的列表组 (List Group With Badges)

你可以为任何列表组项添加徽章（badges）来显示未读计数、活动等信息。在 .list-group-item 上使用 .d-flex, .justify-content-between 和 .align-items-center 等工具类（utility classes）来实现徽章的正确对齐。

• 新消息 12
• 已删除项目 5
• 警告 3

要创建一个徽章，使用带有 .badge 类和背景颜色工具类（例如，.bg-primary）的 <span> 元素。.rounded-pill 类使其呈现胶囊形状。

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="list-group w-50">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      New Messages
      <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Deleted Items
      <span class="badge bg-danger rounded-pill">5</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Warnings
      <span class="badge bg-warning rounded-pill text-dark">3</span>
    </li>
  </ul>
</body>
</html>

带链接项的列表组 (List Group With Linked Items)

列表组项也可以是可点击的超链接。可以使用 <div> 替代 <ul>，并使用 <a> 标签（或 <button>) 替代 <li>。添加 .list-group-item-action 类以获得鼠标悬停（hover）和活动（active）状态的样式效果。

第一项 (活动) 第二项 第三项

.active 类表示当前活动的选中项。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-50">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
      First item
    </a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</body>
</html>

禁用项 (Disabled Item)

下面的列表组包含一个被禁用的项目：

第一项 (禁用) 第二项 第三项

要禁用某个项目，添加 .disabled 类。对于 <a> 标签，还需要添加 tabindex="-1" 和 aria-disabled="true"。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-50">
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">
      First item (disabled)
    </a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</body>
</html>

情境类 (Contextual Classes)

可以使用情境类为列表项着色，以提供视觉提示。

• 成功: 第一项
• 信息: 第二项
• 警告: 第三项
• 危险: 第四项

使用诸如 .list-group-item-success, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary 等类。

<!DOCTYPE html>
<html lang="en">
<body>
  <ul class="list-group w-50">
    <li class="list-group-item list-group-item-success">Success: First item</li>
    <li class="list-group-item list-group-item-info">Info: Second item</li>
    <li class="list-group-item list-group-item-warning">Warning: Third item</li>
    <li class="list-group-item list-group-item-danger">Danger: Fourth item</li>
    <li class="list-group-item list-group-item-primary">Primary: Fifth item</li>
    <li class="list-group-item list-group-item-secondary">Secondary: Sixth item</li>
    <li class="list-group-item list-group-item-light">Light: Seventh item</li>
    <li class="list-group-item list-group-item-dark">Dark: Eighth item</li>
  </ul>
</body>
</html>

自定义内容 (Custom Content)

你可以在列表组项内部添加几乎任何 HTML 内容。Bootstrap 5 鼓励使用标准 HTML 元素和工具类来进行布局和间距，例如 flex 工具类（.d-flex, .justify-content-between）、标题标签和段落标签。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="list-group w-75">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small>3 days ago</small>
      </div>
      <p class="mb-1">Some placeholder content in a paragraph.</p>
      <small>And some muted small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Another list group item</h5>
        <small class="text-muted">1 week ago</small>
      </div>
      <p class="mb-1">More placeholder content here for the second item.</p>
      <small class="text-muted">Additional details.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Third item with custom content</h5>
        <small class="text-muted">2 weeks ago</small>
      </div>
      <p class="mb-1">This item demonstrates further customization possibilities.</p>
      <small class="text-muted">Final piece of information.</small>
    </a>
  </div>
</body>
</html>