Bootstrap5：列表组

听海边涛声

已于 2024-08-29 09:46:29 修改

阅读量804

点赞数 29

文章标签： bootstrap 前端

于 2024-08-29 09:43:54 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141649262

版权

https://v5.bootcss.com/docs/components/list-group/

列表组是一个灵活而强大的组件，用于显示一系列内容。在最基本的形式中，列表组只是一个带有list-group类的无序列表，且列表中的元素带有list-group-item类。

创建基础列表组

https://v5.bootcss.com/docs/5.3/components/list-group/#basic-example

例如：
在这里插入图片描述

在这里插入图片描述

设置活动项

https://v5.bootcss.com/docs/components/list-group/#active-items

在.list-group-item 中增加.active项来指示目前的活动选择。

例如：
在这里插入图片描述

在这里插入图片描述

设置禁用项

https://v5.bootcss.com/docs/components/list-group/#disabled-items

在.list-group-item中添加.disabled使其看起来被禁用。请注意，带有.disabled的一些元素还需要自定义javascript来完全禁用其单击事件(例如，链接)。

例如：
在这里插入图片描述

在这里插入图片描述

链接、按钮的列表组

https://v5.bootcss.com/docs/components/list-group/#links-and-buttons

使用<a>或 <button>标签来创建具有悬停、禁用和活动状态的可操作列表组项，方法是添加.list-group-item-action类。

例如：
在这里插入图片描述

在这里插入图片描述

鼠标移到链接的上方，会变成小手的形状，表示可以点击。

移除列表边框

https://v5.bootcss.com/docs/components/list-group/#flush

将.list-group-flush 类添加到list-group元素上，用以移除外边框和圆角，从而创建与其父服务器边对边的列表组。

例如：
在这里插入图片描述

在这里插入图片描述

水平列表组

https://v5.bootcss.com/docs/components/list-group/#horizontal

将.list-group-horizontal 类添加到 .list-group，可以将列表项水平显示而不是垂直显示（并排而不是堆叠）。

例如：
在这里插入图片描述

在这里插入图片描述

创建带编号的列表组

可以通过简单地在.list-group元素上添加.list-group-numbered修饰类来创建带有元素编号的列表组。

数字是通过CSS（而不是<ol>元素的默认浏览器样式）来生成的。

例如：
在这里插入图片描述

在这里插入图片描述

带徽章的列表组

https://v5.bootcss.com/docs/components/list-group/#with-badges

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，只需要在.list-group-item的基础上追加徽章组件badge。

例如：
在这里插入图片描述

在这里插入图片描述

多种颜色列表项

和大多数其它组件一样，可以在列表项上使用相应的类来对它们进行额外的背景色设置，来对它们施加额外的强调。

列表项的颜色可以通过下列类来设置：

list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-danger
list-group-item-warning
list-group-item-info
list-group-item-light
list-group-item-dark

例如：
在这里插入图片描述

在这里插入图片描述

还可以增加悬停的效果，鼠标移上去，背景色变暗：
在这里插入图片描述

鼠标没有移上显示效果：
在这里插入图片描述

鼠标移到第一项上显示效果：
在这里插入图片描述

向列表组添加自定义内容

bootstrap框架在链接列表组的基础上增加了两个样式：

.list-group-item-heading：用来定义列表项头部样式。
.list-group-item-text：用来定义列表项只要内容。

这两个样式的最大作用就是用来帮助开发者可以自定义列表项里的内容。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <h3 class="list-group-item-heading">水果的功效</h3>
      </a>
      <a href="#" class="list-group-item">
        <h3 class="list-group-item-heading">西瓜</h3>
        <p class="list-group-item-text">由于西瓜含有较多的水分，而且其味甘，入胃经，具有解暑生津的功效</p>
      </a>
      <a href="#" class="list-group-item">
        <h3 class="list-group-item-heading">水蜜桃</h3>
        <p class="list-group-item-text">水蜜桃的含铁量高，具有促进血红蛋白再生的能力</p>
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述