Bootstrap 简明教程

Bootstrap - List Groups

列表组对于显示内容的序列来说是一个有效的组件。更改并扩展它们以支持其内部的任何内容。

Basic items

列表组是具有列表项和适当类别的无序列表。根据要求使用您自己的 CSS 创建列表组。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</body>
</html>

Active items

要显示当前活动选择，请添加类 .active 到 .list-group-item 。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item active" aria-current="true">An active item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
        </ul>
</body>
</html>

Disabled items

要禁用列表组，请添加类 .disabled 到 .list-group-item 。一些具有 .disabled 的项需要自定义 JavaScript 来完全禁用其点击事件。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item ">item 1</li>
        <li class="list-group-item ">item 2</li>
        <li class="list-group-item disabled" aria-disabled="true">A disabled item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</body>
</html>

Links and buttons

通过添加 .list-group-item-action ，您可以使用 <a> 或 <button> 创建一个可操作的列表组项列表，其中包含悬停、禁用和活动状态。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action ">item 1</a>
        <a href="#" class="list-group-item list-group-item-action">item 2</a>
        <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item 3</a>
        <a href="#" class="list-group-item list-group-item-action">item 4</a>
        <a class="list-group-item list-group-item-action disabled">item 5</a>
    </div>
</body>
</html>

您可以使用 <button> 中的 disabled 属性，而不是 .disabled 类。元素 <a> 不支持禁用属性。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action ">item 1</button>
        <button type="button" class="list-group-item list-group-item-action">item 2</button>
        <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button>
        <button type="button" class="list-group-item list-group-item-action">item 4</button>
        <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button>
    </div>
</body>
</html>

Flush

要将列表组元素在父容器（例如卡片）中从边缘到边缘显示，请通过添加 .list-group-flush 来删除边框和圆角。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</button>
 </body>
</html>

Numbered

要选择编号列表组项，请添加 .list-group-numbered 修改器类（并避免使用 <ol> 元素）。
<ol> 上的 counter-reset 用于生成数字，然后使用 a::before 伪元素对其进行样式化并将其放在使用 counter-increment 和 content 的 <li> 上。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Item One</li>
        <li class="list-group-item">Item Two</li>
        <li class="list-group-item">Item Three</li>
    </ol>
</button>
</body>
</html>

这些与定制内容配合使用效果非常好，如下所示：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ol class="list-group list-group-numbered">
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 1</div>
            Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 2</div>
             Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 3</div>
              Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">8</span>
        </li>
      </ol>
    </button>
    </body>
    </html>

Horizontal

通过添加类 .list-group-horizontal ，您可以跨所有断点修改列表组项的布局，从垂直变为水平。
要从该断点的最小宽度开始创建列表组水平，请选择响应变量 .list-group-horizontal-{sm|md|lg|xl|xxl} 。
您不能将水平列表组与齐平列表组结合使用。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ul class="list-group list-group-horizontal">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-sm">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-md">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-lg">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-xl">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-xxl">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
    </button>
    </body>
    </html>

Variants

上下文类 list-group-item-primary 、 list-group-item-secondary ……等可用于为具有状态背景和颜色的列表元素设置样式。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ul class="list-group">
        <li class="list-group-item">Default list group item</li>
        <li class="list-group-item list-group-item-primary">Primary list group item</li>
        <li class="list-group-item list-group-item-secondary">secondary list group item</li>
        <li class="list-group-item list-group-item-success">Success list group item</li>
        <li class="list-group-item list-group-item-danger">Danger list group item</li>
        <li class="list-group-item list-group-item-warning">Warning list group item</li>
        <li class="list-group-item list-group-item-info">Info list group item</li>
        <li class="list-group-item list-group-item-light">Light list group item</li>
        <li class="list-group-item list-group-item-dark">Dark list group item</li>
      </ul>
    </body>
    </html>

For links and buttons

您可以在 <a> 和 <button> 元素中使用带有 .list-group-item-action 的上下文类。
应用 .active 状态可指示在上下文列表组项上进行主动选择。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">item 1</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary">item 2</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a>
      </div>
    </body>
    </html>

With badges

通过使用 utilities ，为任意列表组项添加徽章以显示未读计数、活动等。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        item 1
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 2
        <span class="badge bg-primary rounded-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 3
        <span class="badge bg-primary rounded-pill">1</span>
      </li>
    </ul>
  </body>
  </html>

Custom content

使用 Flex utilities ，您可以在其中添加几乎任何 HTML，即使是对于链接列表组，如下所示：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="list-group">
      <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"> Heading 1</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small>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">Heading 2</h5>
          <small class="text-body-secondary">2 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">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">Heading 3</h5>
          <small class="text-body-secondary">1 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">muted small print</small>
      </a>
    </div>
  </body>
  </html>

Checkboxes and radios

在组项列表中添加 Bootstrap 的复选框和单选按钮，并按需要自定义。你可以在没有 <label> 的情况下使用它们，并且不要忘记 include 一个 aria-label 属性和用于辅助功能的值。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">Other's</label>
      </li>
    </ul>
  </body>
  </html>

以下示例演示了单选按钮：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
        <label class="form-check-label" for="firstRadio">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
        <label class="form-check-label" for="secondRadio">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
        <label class="form-check-label" for="thirdRadio">Other's</label>
      </li>
    </ul>
  </body>
  </html>

为了使整个列表组项可点击，请对标签使用 .stretched-link 样式。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <ul class="list-group mt-2">
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1">
            <label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2">
            <label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3">
            <label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label>
          </li>
        </ul>
  </body>
  </html>