Bootstrap的列表组相关知识
目录
- 01-列表组的相关基础知识
- 02-一个简单的列表组示例
- 03-激活或禁用列表组的一行或多行
- 04-设置列表项的颜色
- 05-给列表项添加徽章
01-列表组的相关基础知识
Bootstrap的list-group是一个用于创建列表组件的CSS类，通常用于显示一个项目列表，如导航菜单或其他相关信息的列表。它通常与<ul>或<ol>元素结合使用，创建一个垂直的项目列表，每个项目都可以包含文本、链接、按钮或其他内容。以下是一些常用的list-group类和用法：
list-group：这是主要的list-group类，用于创建基本的列表组件。通常与<ul>或<ol>元素一起使用。
<ul class="list-group"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li>
</ul>
list-group-item：这是用于每个列表项的类。它可以包含文本和其他元素。
<ul class="list-group"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li>
</ul>
list-group-item-action：这是用于将列表项转化为可交互的动作元素的类，通常用于制作可点击的链接或按钮，比如下面的代码中，如果没有加上属性 list-group-item-action 那么鼠标放到相应的区域上无变化，而加上的话，鼠标放到相应的区域这个区域会有变化。
<ul class="list-group"><li class="list-group-item list-group-item-action">Clickable Item 1</li><li class="list-group-item list-group-item-action">Clickable Item 2</li><li class="list-group-item list-group-item-action">Clickable Item 3</li>
</ul>
list-group-item-primary,list-group-item-secondary,list-group-item-success, 等：这些是用于指定列表项的颜色主题的类。您可以根据需要选择不同的颜色主题。
<ul class="list-group"><li class="list-group-item list-group-item-primary">Primary Item</li><li class="list-group-item list-group-item-success">Success Item</li><li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>
list-group-item-heading：这是用于添加每个列表项的标题的类。
<ul class="list-group"><li class="list-group-item"><h5 class="list-group-item-heading">Item Title</h5>Item description goes here.</li>
</ul>
以上是一些Bootstrap中list-group的常见类和用法，它们可以帮助您创建各种列表组件，用于导航、显示信息或其他目的。您可以根据自己的需求组合和自定义这些类，以满足特定的设计和功能要求。
02-一个简单的列表组示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>列表组</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">列表组</h3>
<ul class="list-group"><li class="list-group-item list-group-item-action">江南行 张潮〔唐代〕</li><li class="list-group-item list-group-item-action">1. 茨菰叶烂别西湾</li><li class="list-group-item list-group-item-action">2. 莲子花开犹未还</li><li class="list-group-item list-group-item-action">3. 妾梦不离江水上</li><li class="list-group-item list-group-item-action">4. 人传郎在凤凰山</li>
</ul>
</body>
</html>
运行效果如下：
由于添加到类list-group-item-action，所以当鼠标放到对应的区域上，效果如下：
如果相应的行我没有添加类list-group-item-action，那么效果如下：
03-激活或禁用列表组的一行或多行
示例代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>激活和禁用状态</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">激活和禁用状态</h3>
<ul class="list-group"><li class="list-group-item">江南行 张潮〔唐代〕</li><li class="list-group-item active">1. 茨菰叶烂别西湾（激活状态）</li><li class="list-group-item active">2. 莲子花开犹未还（激活状态）</li><li class="list-group-item disabled">3. 妾梦不离江水上（禁用状态）</li><li class="list-group-item disabled">4. 人传郎在凤凰山（禁用状态）</li>
</ul>
</body>
</html>
运行效果如下：
04-设置列表项的颜色
示例代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置列表项的颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">列表项的背景和文字颜色</h3>
<ul class="list-group"><li class="list-group-item list-group-item-primary">西湖南北烟波阔</li><li class="list-group-item list-group-item-secondary">风里丝簧声韵咽</li><li class="list-group-item list-group-item-success">舞余裙带绿双垂</li><li class="list-group-item list-group-item-danger">酒入香腮红一抹</li><li class="list-group-item list-group-item-warning">杯深不觉琉璃滑</li><li class="list-group-item list-group-item-info">贪看六幺花十八</li><li class="list-group-item list-group-item-light">明朝车马各西东</li><li class="list-group-item list-group-item-dark">惆怅画桥风与月</li>
</ul>
</body>
</html>
运行效果如下：
05-给列表项添加徽章
示例代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>添加徽章</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">添加徽章</h3>
<h5>各个训练营报名的人数：</h5>
<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">网络安全训练营<span class="badge badge-primary badge-pill">260</span></li><li class="list-group-item d-flex justify-content-between align-items-center">网站开发训练营<span class="badge badge-primary badge-pill">160</span></li><li class="list-group-item d-flex justify-content-between align-items-center">人工智能开发训练营<span class="badge badge-primary badge-pill">220</span></li>
</ul>
</body>
</html>
运行效果如下：
相关文章：
Bootstrap的列表组相关知识
目录 01-列表组的相关基础知识02-一个简单的列表组示例03-激活或禁用列表组的一行或多行04-设置列表项的颜色05-给列表项添加徽章 01-列表组的相关基础知识 Bootstrap的list-group是一个用于创建列表组件的CSS类，通常用于显示一个项目列表，如导航菜单或…...
Linux简单安装ffmpeg 实现用PHP压缩音频
一、下载安装 1、官方下载地址：Download FFmpeg 2、下载完上传到服务器然 然后解压就算安装完成了 tar -xf ffmpeg-git-amd64-static.tar.xz 3、然后配置一下全局变量（当然也可以不用配置 使用的时候带上文件路径就行） cd /usr/bin ln -s…...
Vue解决 npm -v 报错（一）
报错内容： npm WARN config global --global, --local are deprecated. Use --locationglobal instead. 解决方案： 代码： prefix -g 替换为： prefix --locationglobal 原创作者：吴小糖 创作时间：2023.1…...
IP地址是如何定位的
IP地址定位原理和方法 在互联网时代，了解设备或用户的地理位置对于各种应用和服务至关重要，从广告定向到网络安全。IP地址定位是一种常用的方法，允许确定IP地址背后的实际地理位置。本文将介绍IP地址定位的原理和方法。 IP地址基础…...
【分布式】入门级NCCL多机并行实践 - 02
# 背景知识 大模型和分布式训练对数据的吞吐量以及并行度都有很高的要求，NCCL就是在这个背景下诞生的。 如果你是一个只会写写Python，调用PyTorch和Horovod的算法萌新，可能对于分布式底层的东西不太了解，在下岗热潮中被主管逼着…...
Rust的模式匹配
文章目录 match匹配if let匹配 match匹配 match可以结合枚举使用，例如 enum IpVersion {V4,V6, }fn ParseIpVersion(version: IpVersion) -> String {match version {IpVersion::V4 > String::from("ipv4"),IpVersion::V6 > String::from(&quo…...
操作系统【OS】虚拟机
定义 使用虚拟化技术，将一台物理机器虚化为多台虚拟机器VM，每个虚拟机器都可用独立运行一个操作系统 分类 传统计算机 第一类VMM 第二类VMM...
不写代码、构建一个开源的 ChatGPT，总共需要几步？｜Hugging News #1020
每一周，我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新，包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等，我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息࿰…...
VBA操作数据库
相关背景： 对于数据分析同学，一般SQL，EXCEL是必备技能，但对于VBA和Python可能有的同学不会；在处理本地数据上(诸如excel、txt|csv文本），后续尝试使用VBA或者Python写一个sql查询的GUI界面&…...
【华为OD机试】HJ26 字符串排序
描述 编写一个程序，将输入字符串中的字符按如下规则排序。 规则 1 ：英文字母从 A 到 Z 排列，不区分大小写。 如，输入： Type 输出： epTy 规则 2 ：同一个英文字母的大小写同时存在时，…...
哈里斯鹰算法优化BP神经网络(HHO-BP)回归预测研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
摆动序列【贪心4】
题目 分析 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {if(nums.size() < 2) return nums.size();int ret 0,left 0,right 0;for(int i 0;i < nums.size()-1;i){right nums[i1] - nums[i];if(right 0) continue;if(left …...
Youtrack Linux 安装
我们考虑最后应该使用的是 ZIP 方式的安装。 按照官方的说法如何设置运行 YouTrack 应该是非常简单的。 准备环境 根据官方的说法，我们需要做的就是下载 Zip 包，然后把 Zip 包解压到指定的目录中就可以了。 下载 当前官方的下载地址为：Ge…...
分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测
分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测 目录 分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现SSA-CNN-LSTM数据分类预测&…...
飞书-多维文档-计算时间差
1. 选择字段类型 如图所示，字段类型选择 公式 2. 编辑公式 单击 公式编辑器 在弹出的公式编辑框中输入公式 TEXT([终结时间]-[开始时间],"HH:MM") [终结时间] 和 [开始时间] 请替换成你的表格中对应的字段名称HH:MM 表示输出的时间格式为 时:分其中 “…...
【文献copilot】调用文心一言api对论文逐段总结
文献copilot：调用文心一言api对论文逐段总结 当我读文献的时候，感觉读得太慢了，看翻译软件翻译的又觉得翻译的不好。于是我就写了个程序辅助我读文献，它可以逐段总结，输出格式是：原文一句话总结分段总结&a…...
编译安装Nginx+GeoIP2自动更新+防盗链+防爬虫+限制访问速度+限制连接数
此文章是Nginx的GeoIP2模块和MaxMind国家IP库相互结合，达到客户端IP访问的一个数据记录以及分析，同时还针对一些业务需求做出对Nginx中间件的控制，如：防盗链、防爬虫、限制访问速度、限制连接数等 该篇文章是从一个热爱搞技术的博…...
基于JAVA+SpringBoot+UniApp+Vue的前后端分离的手机移动端图书借阅平台
✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍： 随着社会信息化的快速…...
华为云CodeArts IDE for Java安装使用教程
本篇内容主要介绍使用华为云CodeArts IDE for Java创建工程、代码补全、运行调试代码、Build构建和测试相关的主要功能。 一、下载安装华为云CodeArts IDE for Java 华为云CodeArts IDE for Java安装要求 至少需要 2 GB RAM ，但是推荐8 GB RAM; 至少需要 2.5 GB 硬…...
MPI并行编程技术
MPI并行编程技术 MPI含义及环境搭建安装点对点通信阻塞型接口MPI_SendMPI_Recv 阻塞式示例tag雅可比迭代示例死锁 MPI含义及环境搭建安装 MPICH官网 Github地址 MPI历史版本下载地址 安装教程 MPI介绍 MPI课程 点对点通信 阻塞型接口 MPI_Send MPI_Recv 阻塞式示例 tag 雅…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
LRU 缓存机制详解与实现（Java版） + 力扣解决
📌 LRU 缓存机制详解与实现（Java版） 一、📖 问题背景 在日常开发中，我们经常会使用 缓存（Cache） 来提升性能。但由于内存有限，缓存不可能无限增长，于是需要策略决定&am…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践
在 Kubernetes 集群中，如何在保障应用高可用的同时有效地管理资源，一直是运维人员和开发者关注的重点。随着微服务架构的普及，集群内各个服务的负载波动日趋明显，传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...
6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...