Bootstrap 简明教程
Bootstrap - List Groups
列表组对于显示内容的序列来说是一个有效的组件。更改并扩展它们以支持其内部的任何内容。
The list groups is an effective component for displaying a sequence of content. Change and extend them to support the regarding any content within.
Basic items
列表组是具有列表项和适当类别的无序列表。根据要求使用您自己的 CSS 创建列表组。
The list group is an unordered list with list items and suitable classes. Create the list group with your own CSS as per requirement.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 。
To show the currently active selection add the classes .active to a .list-group-item.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 来完全禁用其点击事件。
To create the list group disabled add the class .disabled to .list-group-item. Some items with .disabled will need custom JavaScript to make it fully disable their click events.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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> 创建一个可操作的列表组项列表，其中包含悬停、禁用和活动状态。
By adding .list-group-item-action, you can use <a> or <button> to create an actionable list of group items with hover, disabled, and active states.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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> 不支持禁用属性。
You can use the disabled attribute with <button> rather than the .disabled class. The element <a> doesn’t support the disabled attribute.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 来删除边框和圆角。
To display list group elements edge-to-edge in a parent container (such as cards), remove borders and round corners by adding .list-group-flush.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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
-
To opt into numbered list group items, add the .list-group-numbered modifier class (and avoid the use of <ol> element).
-
The counter-reset on the <ol> is used to generate numbers, which are then stylized and placed on the <li> with counter-increment and content using the a::before pseudo-element.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>这些与定制内容配合使用效果非常好，如下所示：
These work excellently with customized content as demonstrated below:
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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
-
By adding the class .list-group-horizontal you can modify the layout of list group items from vertical to horizontal across all breakpoints.
-
To create a list group horizontal starting at that breakpoint’s min-width select a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl}.
-
You cannot combine horizontal list groups with flush list groups.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 ……等可用于为具有状态背景和颜色的列表元素设置样式。
The contextual classes list-group-item-primary, list-group-item-secondary ….etc. can be used to style list elements with a stateful background and colour.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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
-
You can use contextual classes with .list-group-item-action for <a> and <button> elements.
-
Apply .active state to indicate an active selection on a contextual list group item.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 ，为任意列表组项添加徽章以显示未读计数、活动等。
By using the certain utilities, add badges to any list group item to display unread counts, activity, and more.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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，即使是对于链接列表组，如下所示：
Using Flex utilities, you can add almost any HTML within, even for linked list groups as demonstrated below:
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 属性和用于辅助功能的值。
Add Bootstrap’s checkboxes and radios inside the list of group items and customize as required. You can use them without <label>, and don’t forget to include an aria-label attribute and value for accessibility.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>以下示例演示了单选按钮：
The following example demonstrates radio buttons:
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 样式。
To make the whole list group item clickable, use the .stretched-link style on the labels.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>