目录
列表组
基础的列表组
实例
活动的列表项
实例
禁用的列表项
实例
链接列表项
实例
移除列表边框
实例
带编号的列表组
实例
水平列表组
实例
多种颜色列表项
实例
多种颜色的链接列表项
实例
带徽章的列表组
实例
列表组案例
实例一
实例二
列表组
基础的列表组
在 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>运行结果
