目录
列表组
基础的列表组
在 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>
运行结果