Bootstrap-HTML（三）Bootstrap5列表组全解析

前言
（一）HTML 列表基础回顾
- 1.无序列表
- 2.有序列表
- 3.定义列表
二、无样式的有序列表和无序列表
- 内联列表
三、Bootstrap5 列表组
- 1.基础的列表组
- 2.设置禁用和活动项
- 3.链接项的列表组
- 4.移除列表边框
- 5.水平列表组
- 6.创建编号列表组
- 7.带徽章的列表组
- 8.多种颜色列表项
- 9.向列表组添加自定义内容：

前言

在网页设计与开发中，Bootstrap5 为我们提供了一系列便捷且美观的组件，帮助我们快速搭建出富有吸引力和交互性的页面。今天，就让我们一起深入了解一下 Bootstrap5 中的列表

往期链接
Bootstrap-HTML（二）深入探索容器，网格系统和排版
https://blog.csdn.net/2402_83322742/article/details/144208040?spm=1001.2014.3001.5501
Bootstrap5-HTML（一）解锁前端开发新姿势，快速上手不是梦！
https://blog.csdn.net/2402_83322742/article/details/144205783?spm=1001.2014.3001.5501

（一）HTML 列表基础回顾

在 HTML 中，我们常见三种不同类型的列表：

在Bootstrap中我们也可以使用列表
可以使用 Bootstrap 创建列表
可以创建三种不同类型的 HTML 列表：

1.无序列表

用于顺序无关紧要的项目列表，列表项标有项目符号，像 ⚬、● 等，语法结构为 <ul><li>列表项内容</li></ul>

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><h2>购物清单（Bootstrap 无序列表）</h2><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul>
</div>
</body>
</html>

在这里插入图片描述

2.有序列表

适用于顺序确实很重要的项目列表，其列表项用数字标记，例如 1、ⅵ 等，格式为 <ol><li>列表项内容</li></ol>

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><h2>安装软件步骤（Bootstrap 有序列表）</h2><ol><li>下载安装包</li><li>双击运行安装程序</li><li>按照安装向导提示逐步完成配置和安装操作</li><li>安装完成后，启动软件进行试用</li></ol>
</div>
</body>
</html>

在这里插入图片描述

3.定义列表

主要呈现术语列表及其相关描述，结构为 <dl><dt>术语</dt><dd>描述内容</dd></dl>。

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><h2>HTML 标签解释（Bootstrap 定义列表）</h2><dl><dt>HTML</dt><dd>超文本标记语言（HyperText Markup Language），用于创建网页结构，是网页的基础骨架。</dd><dt>CSS</dt><dd>层叠样式表（Cascading Style Sheets），主要用来控制网页的样式，比如页面布局、字体、颜色等外观表现。</dd><dt>JavaScript</dt><dd>一种脚本语言，能够为网页添加交互性，实现动态效果，如表单验证、页面动画等功能。</dd></dl>
</div>
</body>
</html>

在这里插入图片描述

二、无样式的有序列表和无序列表

有时候，我们需要从列表项中去除默认样式像 ⚬、● 等
Bootstrap5 提供了便捷的方法，只需简单地将类 .list-unstyled 应用到相应的 <ul> 或 <ol> 元素即可

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class="container"><h3>去点列表</h3><ul class="list-unstyled"><li>HTML</li><li>CSS</li><li>Bootstrap</li></ul></div>
</body></html>

在这里插入图片描述

内联列表

若想使用有序列表或无序列表创建水平菜单（也就是将垂直方向的列表变为水平方向，一般用作菜单导航样式）
可以通过将类 .list-inline 添加到 <ul> 或 <ol> 并将类 .list-inline-item 添加到子 <li> 元素来实现。

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><h3>内联列表</h3><ul class="list-inline"><li class="list-inline-item">HTML</li><li class="list-inline-item">CSS</li><li class="list-inline-item">Bootstrap</li></ul>
</body></html>

在这里插入图片描述

三、Bootstrap5 列表组

列表组是非常实用且灵活的组件，它能以漂亮的方式展示元素列表。

1.基础的列表组

最基本的形式就是一个带有 .list-group 类的无序列表，且列表中的元素带有 .list-group-item 类，像这样：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li>
</ul>
</body></html>

在这里插入图片描述

2.设置禁用和活动项

我们可以通过添加类来指示列表项的不同状态。将类 .active 添加到 .list-group-item 类后面，就能表示当前项目元素是活动的；添加 .disabled 类，则可使其呈现禁用状态，

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group"><li class="list-group-item active">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item disabled">第三项</li>
</ul>
</body></html>

在这里插入图片描述

3.链接项的列表组

若要创建一个链接的列表项，可以将 <li> 替换为 <a>。如果希望鼠标悬停时显示灰色背景，还可以添加 .list-group-item-action 类，如下代码所示：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group"><a href="#" class="list-group-item list-group-item-action">第一项</a><a href="#" class="list-group-item list-group-item-action">第二项</a><a href="#" class="list-group-item list-group-item-action">第三项</a>
</ul>
</body></html>

在这里插入图片描述

4.移除列表边框

使用 .list-group-flush 类添加到 list-group 元素上，能够移除外边框和圆角，创建与其父容器边对边的列表组，示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group list-group-flush"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li>
</ul>
</body></html>

在这里插入图片描述

5.水平列表组

添加 .list-group-horizontal 类到 .list-group，列表项就会水平显示而不是垂直显示（并排而不是堆叠），如下：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul 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>
</ul>
</body></html>

在这里插入图片描述

6.创建编号列表组

通过在 .list-group 元素上添加类 .list-group-numbered，就能轻松创建带有元素编号的列表组，需要注意的是这里的数字是通过 CSS 生成，而非 <ol> 元素的默认浏览器样式哦，代码如下：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><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>
</body></html>

在这里插入图片描述

7.带徽章的列表组

这其实就是将 Bootstrap 框架中的徽章组件和基础列表组件结合在一起的效果，只需在 .list-group-item 的基础上追加徽章组件 “badge”，示例如下

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group"><li class="list-group-item">第一项<small class="bg-primary badge">12</small></li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li><li class="list-group-item">第四项</li>
</ul>
</body></html>

8.多种颜色列表项

多数其他组件一样，我们可以在列表组项目上使用相应的类来对它们进行额外的背景色设置，以施加额外的强调。可用的颜色类有 .list-group-item-success、.list-group-item-secondary、.list-group-item-info、.list-group-item-warning、.list-group-item-danger、.list-group-item-primary、.list-group-item-dark、.list-group-item-light，示例如下：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><ul class="list-group"><li class="list-group-item list-group-item-success">Success item</li><li class="list-group-item list-group-item-secondary">Secondary item</li><li class="list-group-item list-group-item-info">Info item</li><li class="list-group-item list-group-item-warning">Warning item</li><li class="list-group-item list-group-item-danger">Danger item</li><li class="list-group-item list-group-item-primary">Primary item</li><li class="list-group-item list-group-item-dark">Dark item</li><li class="list-group-item list-group-item-light">Light item</li>
</ul>
</body></html>

在这里插入图片描述

9.向列表组添加自定义内容：

Bootstrap5 在链接列表组的基础上增加了两个样式，.list-group-item-heading 用来定义列表项头部样式，.list-group-item-text 用来定义列表项主要内容，方便开发者自定义列表项里的内容，示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><!-- 最新的 Bootstrap5 核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!-- 图标文件 --><link rel="stylesheet" href="../../icons-v1.11.2/font/bootstrap-icons.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head><body><div class="list-group"><a href="#" class="list-group-item active"><h4 class="list-group-heading">网站服务</h4></a><a href="#" class="list-group-item"><h4 class="list-group-heading">标题一</h4><p class="list-group-item-text">这里面是内容一</p></a><a href="#" class="list-group-item"><h4 class="list-group-heading active">标题二</h4><p class="list-group-item-text">这里面是内容二</p></a>
</div>
</body></html>