目录
列表组
基础的列表组
实例
活动的列表项
实例
禁用的列表项
实例
链接列表项
实例
移除列表边框
实例
带编号的列表组
实例
水平列表组
实例
多种颜色列表项
实例
多种颜色的链接列表项
实例
带徽章的列表组
实例
列表组案例
实例一
实例二
列表组
基础的列表组
在 Bootstrap 5 中，可以使用类为 .list-group 的 <ul>或<ol> 元素和类为 .list-group-item 的 <li> 元素。这通常用于显示一组有序或无序的项目。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>基础的列表组</h1>
<ul class="list-group">
<li class="list-group-item">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ul><br />
<ol class="list-group">
<li class="list-group-item">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ol>
</div>
</body>
</html>运行结果
活动的列表项
在Bootstrap中，可以通过添加一个.active类到<li>元素来设置一个激活状态的列表项。这通常用于高亮显示当前选定的列表项。
注意：这个类可以应用于任何元素，不仅仅是<li>元素。你可以根据需要灵活地应用这个类来设置激活状态。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>活动状态</h1>
<ul class="list-group">
<li class="list-group-item active">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ul><br />
<ol class="list-group">
<li class="list-group-item active">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ol>
</div>
</body>
</html>运行结果
禁用的列表项
在Bootstrap中，可以使用.disabled类来设置一个禁用的列表项。这通常用于表示该列表项不可点击或不可用。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>禁用的列表项</h1>
<ul class="list-group">
<li class="list-group-item disabled">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ul><br />
<ol class="list-group">
<li class="list-group-item disabled">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ol>
</div>
</body>
</html>运行结果
链接列表项
在Bootstrap中，可以将 <ul> 替换为 <div> ， <a> 替换 <li>，使用.list-group-item-action类来创建一个链接的列表项，并在鼠标悬停时显示灰色背景。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>链接列表项</h1>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">项目 1</a>
<a href="#" class="list-group-item list-group-item-action">项目 2</a>
<a href="#" class="list-group-item list-group-item-action">项目 3</a>
</div>
</div>
</body>
</html>在这个示例中，<div>元素用于包装链接列表项，<a>元素用于创建链接，并添加了.list-group-item和.list-group-item-action类。当鼠标悬停在链接上时，.list-group-item-action类将添加灰色背景色。
运行结果
移除列表边框
在Bootstrap 5中，.list-group-flush类可以用于移除列表的边框和圆角。这个类可以应用于.list-group元素，以创建一个没有边框和圆角的列表组。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>移除列表边框</h1>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">项目 1</a>
<a href="#" class="list-group-item list-group-item-action">项目 2</a>
<a href="#" class="list-group-item list-group-item-action">项目 3</a>
</div>
</div>
</body>
</html>运行结果
带编号的列表组
在Bootstrap 5中，可以使用 .list-group-numbered 类创建前面带有数字的列表项。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>带编号的列表组</h1>
<ol class="list-group list-group-numbered">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
<li class="list-group-item">第四项</li>
</ol>
</div>
</div>
</body>
</html>运行结果
水平列表组
在Bootstrap 5中，可以将.list-group-horizontal类添加到 .list-group类中，来创建一个水平列表组，其中列表项水平显示而不是垂直显示。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>水平列表组</h1>
<ol class="list-group list-group-horizontal">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
<li class="list-group-item">第四项</li>
</ol>
</div>
</div>
</body>
</html>在这个示例中，.list-group-horizontal类被添加到.list-group元素上，以使列表项水平显示。
运行结果
多种颜色列表项
在Bootstrap中，可以使用不同的类来设置列表项的颜色。以下是一些可用的类：
- .list-group-item-success：设置成功（绿色）背景色。
- .list-group-item-secondary：设置次要（灰色）背景色。
- .list-group-item-info：设置信息（蓝色）背景色。
- .list-group-item-warning：设置警告（黄色）背景色。
- .list-group-item-danger：设置危险（红色）背景色。
- .list-group-item-dark：设置深色（黑色）背景色。
- .list-group-item-light：设置浅色（白色）背景色。
这些类可以应用于.list-group-item元素，以改变其背景颜色。可以在一个列表项上使用多个颜色类，但请注意，Bootstrap的颜色类会覆盖彼此，因此最后应用的类将决定最终的颜色。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>多种颜色列表项</h1>
<ul class="list-group">
<li class="list-group-item">初始项目</li>
<li class="list-group-item list-group-item-success">成功项目</li>
<li class="list-group-item list-group-item-secondary">次要项目</li>
<li class="list-group-item list-group-item-info">信息项目</li>
<li class="list-group-item list-group-item-warning">警告项目</li>
<li class="list-group-item list-group-item-danger">危险项目</li>
<li class="list-group-item list-group-item-dark">深色项目</li>
<li class="list-group-item list-group-item-light">浅色项目</li>
</ul>
</div>
</div>
</body>
</html>运行结果
多种颜色的链接列表项
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>多种颜色列表项</h1>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
</div>
</div>
</body>
</html>运行结果
带徽章的列表组
在Bootstrap 5中，可以使用.badge类来创建一个徽章，并将其与列表项结合使用。徽章通常用于显示一些额外的信息或标记，例如提示、警告或状态。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>带徽章的列表组</h1>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
项目 1
<span class="badge bg-primary rounded-pill">主要</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
项目 2
<span class="badge bg-secondary rounded-pill">次要</span>
</li>
</ul>
</div>
</body>
</html>运行结果
列表组案例
实例一
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-start border-0">
<div>
<h3>项目 1</h3>
<p>这是项目 1 的描述。</p>
</div>
<div>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-secondary">删除</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start border-0">
<div>
<h3>项目 2</h3>
<p>这是项目 2 的描述。</p>
</div>
<div>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-secondary">删除</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start border-0">
<div>
<h3>项目 3</h3>
<p>这是项目 3 的描述。</p>
</div>
<div>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-secondary">删除</button>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start border-0">
<div>
<h3>项目 4</h3>
<p>这是项目 4 的描述。</p>
</div>
<div>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-secondary">删除</button>
</div>
</li>
<li class="list-group bg-dark text-white p-0">最后的项目（背景色）</li>
</ul>
</div>
<script>
window.onload = function() {
var editButtons = document.querySelectorAll(".btn-primary");
var deleteButtons = document.querySelectorAll(".btn-secondary");
var pElements = document.querySelectorAll("p");
// 为编辑按钮添加点击事件监听器
editButtons.forEach(function(button, index) {
button.addEventListener("click", function() {
// 弹出编辑框，用于修改项目信息
var newDescription = prompt("请输入新的项目描述：");
if (newDescription) {
pElements[index].innerText = newDescription;
}
});
});
// 为删除按钮添加点击事件监听器
deleteButtons.forEach(function(button, index) {
button.addEventListener("click", function() {
// 删除该项目的相关内容
var confirmDelete = confirm("确定要删除此项目吗？");
if (confirmDelete) {
var listItem = this.parentNode.parentNode;
listItem.remove();
}
});
});
};
</script>
</body>
</html>运行结果
实例二
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Bootstrap5列表组综合案例</h2>
<ul class="list-group">
<li class="list-group-item">
<h3>列表项1</h3>
<p>这是列表项1的描述。</p>
<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
<ul class="list-group">
<li class="list-group-item">嵌套列表项1</li>
<li class="list-group-item">嵌套列表项2</li>
<li class="list-group-item">嵌套列表项3</li>
</ul>
</li>
<li class="list-group-item">
<h3>列表项2</h3>
<p>这是列表项2的描述。</p>
<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
<ul class="list-group">
<li class="list-group-item">嵌套列表项4</li>
<li class="list-group-item">嵌套列表项5</li>
<li class="list-group-item">嵌套列表项6</li>
</ul>
</li>
<li class="list-group-item">
<h3>列表项3</h3>
<p>这是列表项3的描述。</p>
<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
<ul class="list-group">
<li class="list-group-item">嵌套列表项7</li>
<li class="list-group-item">嵌套列表项8</li>
<li class="list-group-item">嵌套列表项9</li>
</ul>
</li>
</ul>
</div>
<script>
window.onload = function() {
var addButtons = document.querySelectorAll(".add-nested-item");
var deleteButtons = document.querySelectorAll(".delete-nested-item");
var editButtons = document.querySelectorAll(".edit-nested-item");
// 为添加按钮添加点击事件监听器
addButtons.forEach(function(button) {
button.addEventListener("click", function() {
// 创建新的嵌套列表项
var newNestedItem = document.createElement("li");
newNestedItem.className = "list-group-item";
newNestedItem.innerText = "新的嵌套列表项";
// 将新的嵌套列表项添加到父级列表项的子列表中
var parentList = button.parentNode.querySelector("ul.list-group");
parentList.appendChild(newNestedItem);
});
});
// 为编辑按钮添加点击事件监听器
editButtons.forEach(function(button) {
button.addEventListener("click", function() {
// 获取父级列表项的子列表
var parentList = button.parentNode.querySelector("ul.list-group");
// 获取该父级列表项的所有嵌套列表项
var nestedItems = parentList.querySelectorAll("li.list-group-item");
// 遍历每个嵌套列表项
nestedItems.forEach(function(nestedItem) {
// 修改嵌套列表项的内容
nestedItem.innerText = "更改后的嵌套列表项";
});
});
});
// 为删除按钮添加点击事件监听器
deleteButtons.forEach(function(button) {
button.addEventListener("click", function() {
// 删除对应的嵌套列表项
var nestedItem = button.parentNode;
nestedItem.remove();
});
});
};
</script>
</body>
</html>运行结果
