Bootstrap - 列出组

列表组是显示内容序列的有效组件。更改和扩展它们以支持其中的任何内容。

基本项目

列表组是一个无序列表，其中包含列表项和合适的类。根据要求使用您自己的 CSS 创建列表组。

例子

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

<!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添加到.list-group-item。

例子

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

<!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类添加到.list-group-item。某些带有.disabled 的项目将需要自定义 JavaScript 才能完全禁用其点击事件。

例子

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

<!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>

链接和按钮

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

请记住不要在此处使用标准.btn类。

例子

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

<!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类一起使用。元素<a>不支持disabled属性。

例子

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

<!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>

冲洗

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

例子

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

<!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>

编号

  • 要选择加入编号列表组项目，请添加.list-group-numbered 修饰符类（并避免使用<ol>元素）。

  • <ol>上的计数器重置用于生成数字，然后使用a::before伪元素将其样式化并放置在具有计数器增量和内容的<li>上。

例子

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

<!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>

这些与定制内容完美配合，如下所示：

例子

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

    <!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>

水平的

  • 通过添加.list-group-horizo​​ntal类，您可以将所有断点的列表组项的布局从垂直修改为水平。

  • 要创建从该断点的最小宽度开始的水平列表组，请选择响应式变体.list-group-horizo​​ntal-{sm|md|lg|xl|xxl}。

  • 您不能将水平列表组与齐平列表组组合。

注意：如果您想在水平时列出等宽的组项目，请将.flex-fill类添加到每个列表组项目中。

例子

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

    <!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>

变种

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

例子

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

    <!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>

对于链接和按钮

  • 您可以将上下文类与.list-group-item-action一起用于<a>和<button>元素。

  • 应用.active状态来指示上下文列表组项目上的活动选择。

例子

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

    <!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>

带徽章

通过使用某些实用程序，将徽章添加到任何列表组项目以显示未读计数、活动等。

例子

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

  <!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>

定制内容

使用Flex 实用程序，您可以在其中添加几乎任何 HTML，甚至可以添加链接列表组，如下所示：

例子

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

  <!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>

复选框和单选框

在组项目列表中添加 Bootstrap 的复选框和单选按钮，并根据需要进行自定义。您可以在没有<label> 的情况下使用它们，并且不要忘记包含aria-label属性和可访问性值。

例子

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

  <!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>

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

例子

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

  <!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样式。

例子

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

  <!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>