-
学习Bootstrap 5的第九天
目录
列表组
基础的列表组
在 Bootstrap 5 中，可以使用类为 .list-group 的
- 或
- 元素。这通常用于显示一组有序或无序的项目。
实例
- 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">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ul><br />
- <ol class="list-group">
- <li class="list-group-item">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ol>
- div>
- body>
- html>
运行结果
活动的列表项
在Bootstrap中，可以通过添加一个.active类到
- 元素来设置一个激活状态的列表项。这通常用于高亮显示当前选定的列表项。
注意：这个类可以应用于任何元素，不仅仅是
- 元素。你可以根据需要灵活地应用这个类来设置激活状态。
实例
- 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">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ul><br />
- <ol class="list-group">
- <li class="list-group-item active">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ol>
- div>
- body>
- html>
运行结果
禁用的列表项
在Bootstrap中，可以使用.disabled类来设置一个禁用的列表项。这通常用于表示该列表项不可点击或不可用。
实例
- 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">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ul><br />
- <ol class="list-group">
- <li class="list-group-item disabled">项目 1li>
- <li class="list-group-item">项目 2li>
- <li class="list-group-item">项目 3li>
- ol>
- div>
- body>
- html>
运行结果
链接列表项
在Bootstrap中，可以将
- 替换为
- ，使用.list-group-item-action类来创建一个链接的列表项，并在鼠标悬停时显示灰色背景。
实例
- 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">项目 1a>
- <a href="#" class="list-group-item list-group-item-action">项目 2a>
- <a href="#" class="list-group-item list-group-item-action">项目 3a>
- div>
- div>
- body>
- html>
在这个示例中，
元素用于包装链接列表项，元素用于创建链接，并添加了.list-group-item和.list-group-item-action类。当鼠标悬停在链接上时，.list-group-item-action类将添加灰色背景色。运行结果
移除列表边框
在Bootstrap 5中，.list-group-flush类可以用于移除列表的边框和圆角。这个类可以应用于.list-group元素，以创建一个没有边框和圆角的列表组。
实例
- 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">项目 1a>
- <a href="#" class="list-group-item list-group-item-action">项目 2a>
- <a href="#" class="list-group-item list-group-item-action">项目 3a>
- div>
- div>
- body>
- html>
运行结果
带编号的列表组
在Bootstrap 5中，可以使用 .list-group-numbered 类创建前面带有数字的列表项。
实例
- 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类中，来创建一个水平列表组，其中列表项水平显示而不是垂直显示。
实例
- 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的颜色类会覆盖彼此，因此最后应用的类将决定最终的颜色。
实例
- 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>
运行结果
多种颜色的链接列表项
实例
- 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类来创建一个徽章，并将其与列表项结合使用。徽章通常用于显示一些额外的信息或标记，例如提示、警告或状态。
实例
- 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>
运行结果
列表组案例
实例一
- 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>项目 1h3>
- <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>项目 2h3>
- <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>项目 3h3>
- <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>项目 4h3>
- <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>
运行结果
实例二
- 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>列表项1h3>
- <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">嵌套列表项1li>
- <li class="list-group-item">嵌套列表项2li>
- <li class="list-group-item">嵌套列表项3li>
- ul>
- li>
- <li class="list-group-item">
- <h3>列表项2h3>
- <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">嵌套列表项4li>
- <li class="list-group-item">嵌套列表项5li>
- <li class="list-group-item">嵌套列表项6li>
- ul>
- li>
- <li class="list-group-item">
- <h3>列表项3h3>
- <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">嵌套列表项7li>
- <li class="list-group-item">嵌套列表项8li>
- <li class="list-group-item">嵌套列表项9li>
- 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>
运行结果
， 替换 -
相关阅读:
RabbitMQ安装教程（最新RabbitMQ安装，通用教程）
13.1 Go 反射（Reflection）
java IO流面试总结
python3-python中的GUI，Tkinter的使用，抓取小米应用商店应用列表名称
【数据结构与算法】之动态规划经典问题
简介：Asp.Net Core进阶高级编程教程
MMEngine理解
心理月刊杂志心理月刊杂志社心理月刊编辑部2022年第11期目录
国家/行业标准查询及下载全流程
【国际竞赛-计算机篇】2022年高含金量的计算机竞赛有哪些
- 原文地址：https://blog.csdn.net/m0_74293254/article/details/132773464
- 元素和类为 .list-group-item 的
- 元素。这通常用于显示一组有序或无序的项目。