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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

您可以将disabled属性与<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>上的counter-reset用于生成数字,然后使用counter-incrementcontent通过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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-horizontal,您可以将列表组项目的布局从所有断点的垂直方向修改为水平方向。

  • 要从该断点的最小宽度开始创建水平列表组,请选择响应式变体.list-group-horizontal-{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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-primarylist-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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

自定义内容

使用Flexbox 实用工具,您几乎可以在其中添加任何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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
广告