当前位置： 首页 > news >正文

Bootstrap的列表组相关知识

news 2026/4/26 5:09:01

目录

  • 01-列表组的相关基础知识
  • 02-一个简单的列表组示例
  • 03-激活或禁用列表组的一行或多行
  • 04-设置列表项的颜色
  • 05-给列表项添加徽章

01-列表组的相关基础知识

Bootstrap的list-group是一个用于创建列表组件的CSS类，通常用于显示一个项目列表，如导航菜单或其他相关信息的列表。它通常与<ul>或<ol>元素结合使用，创建一个垂直的项目列表，每个项目都可以包含文本、链接、按钮或其他内容。以下是一些常用的list-group类和用法：

  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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类&#xff0c;通常用于显示一个项目列表&#xff0c;如导航菜单或…...

编程日记 2023/10/21 5:59:36

Linux简单安装ffmpeg 实现用PHP压缩音频

一、下载安装 1、官方下载地址&#xff1a;Download FFmpeg 2、下载完上传到服务器然 然后解压就算安装完成了 tar -xf ffmpeg-git-amd64-static.tar.xz 3、然后配置一下全局变量&#xff08;当然也可以不用配置 使用的时候带上文件路径就行&#xff09; cd /usr/bin ln -s…...

编程日记 2023/10/21 5:58:35

Vue解决 npm -v 报错（一）

报错内容&#xff1a; npm WARN config global --global, --local are deprecated. Use --locationglobal instead. 解决方案&#xff1a; 代码&#xff1a; prefix -g 替换为&#xff1a; prefix --locationglobal 原创作者&#xff1a;吴小糖 创作时间&#xff1a;2023.1…...

编程日记 2023/10/21 5:57:34

IP地址是如何定位的

IP地址定位原理和方法 在互联网时代&#xff0c;了解设备或用户的地理位置对于各种应用和服务至关重要&#xff0c;从广告定向到网络安全。IP地址定位是一种常用的方法&#xff0c;允许确定IP地址背后的实际地理位置。本文将介绍IP地址定位的原理和方法。 IP地址基础&#xf…...

编程日记 2023/10/21 5:56:32

【分布式】入门级NCCL多机并行实践 - 02

# 背景知识 大模型和分布式训练对数据的吞吐量以及并行度都有很高的要求&#xff0c;NCCL就是在这个背景下诞生的。 如果你是一个只会写写Python&#xff0c;调用PyTorch和Horovod的算法萌新&#xff0c;可能对于分布式底层的东西不太了解&#xff0c;在下岗热潮中被主管逼着…...

编程日记 2023/10/21 5:55:32

Rust的模式匹配

文章目录 match匹配if let匹配 match匹配 match可以结合枚举使用&#xff0c;例如 enum IpVersion {V4,V6, }fn ParseIpVersion(version: IpVersion) -> String {match version {IpVersion::V4 > String::from("ipv4"),IpVersion::V6 > String::from(&quo…...

编程日记 2023/10/21 5:54:31

操作系统【OS】虚拟机

定义 使用虚拟化技术&#xff0c;将一台物理机器虚化为多台虚拟机器VM&#xff0c;每个虚拟机器都可用独立运行一个操作系统 分类 传统计算机 第一类VMM 第二类VMM...

编程日记 2023/10/21 5:53:30

不写代码、构建一个开源的 ChatGPT，总共需要几步？｜Hugging News #1020

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…...

编程日记 2023/10/21 5:52:29

VBA操作数据库

相关背景&#xff1a; 对于数据分析同学&#xff0c;一般SQL&#xff0c;EXCEL是必备技能&#xff0c;但对于VBA和Python可能有的同学不会&#xff1b;在处理本地数据上(诸如excel、txt|csv文本&#xff09;&#xff0c;后续尝试使用VBA或者Python写一个sql查询的GUI界面&…...

编程日记 2023/10/21 5:51:28

【华为OD机试】HJ26 字符串排序

描述 编写一个程序&#xff0c;将输入字符串中的字符按如下规则排序。 规则 1 &#xff1a;英文字母从 A 到 Z 排列&#xff0c;不区分大小写。 如&#xff0c;输入&#xff1a; Type 输出&#xff1a; epTy 规则 2 &#xff1a;同一个英文字母的大小写同时存在时&#xff0c;…...

编程日记 2023/10/21 5:50:26

哈里斯鹰算法优化BP神经网络(HHO-BP)回归预测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/21 5:49:25

摆动序列【贪心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 …...

编程日记 2023/10/21 5:48:24

Youtrack Linux 安装

我们考虑最后应该使用的是 ZIP 方式的安装。 按照官方的说法如何设置运行 YouTrack 应该是非常简单的。 准备环境 根据官方的说法&#xff0c;我们需要做的就是下载 Zip 包&#xff0c;然后把 Zip 包解压到指定的目录中就可以了。 下载 当前官方的下载地址为&#xff1a;Ge…...

编程日记 2023/10/21 5:47:23

分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测

分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测 目录 分类预测 | MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现SSA-CNN-LSTM数据分类预测&…...

编程日记 2023/10/21 5:46:23

飞书-多维文档-计算时间差

1. 选择字段类型 如图所示&#xff0c;字段类型选择 公式 2. 编辑公式 单击 公式编辑器 在弹出的公式编辑框中输入公式 TEXT([终结时间]-[开始时间],"HH:MM") [终结时间] 和 [开始时间] 请替换成你的表格中对应的字段名称HH:MM 表示输出的时间格式为 时:分其中 “…...

编程日记 2023/10/21 5:45:22

【文献copilot】调用文心一言api对论文逐段总结

文献copilot&#xff1a;调用文心一言api对论文逐段总结 当我读文献的时候&#xff0c;感觉读得太慢了&#xff0c;看翻译软件翻译的又觉得翻译的不好。于是我就写了个程序辅助我读文献&#xff0c;它可以逐段总结&#xff0c;输出格式是&#xff1a;原文一句话总结分段总结&a…...

编程日记 2023/10/21 5:44:21

编译安装Nginx+GeoIP2自动更新+防盗链+防爬虫+限制访问速度+限制连接数

此文章是Nginx的GeoIP2模块和MaxMind国家IP库相互结合&#xff0c;达到客户端IP访问的一个数据记录以及分析&#xff0c;同时还针对一些业务需求做出对Nginx中间件的控制&#xff0c;如&#xff1a;防盗链、防爬虫、限制访问速度、限制连接数等 该篇文章是从一个热爱搞技术的博…...

编程日记 2023/10/21 5:43:20

基于JAVA+SpringBoot+UniApp+Vue的前后端分离的手机移动端图书借阅平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着社会信息化的快速…...

编程日记 2023/10/21 5:42:20

华为云CodeArts IDE for Java安装使用教程

本篇内容主要介绍使用华为云CodeArts IDE for Java创建工程、代码补全、运行调试代码、Build构建和测试相关的主要功能。 一、下载安装华为云CodeArts IDE for Java 华为云CodeArts IDE for Java安装要求 至少需要 2 GB RAM &#xff0c;但是推荐8 GB RAM; 至少需要 2.5 GB 硬…...

编程日记 2023/10/21 5:41:19

MPI并行编程技术

MPI并行编程技术 MPI含义及环境搭建安装点对点通信阻塞型接口MPI_SendMPI_Recv 阻塞式示例tag雅可比迭代示例死锁 MPI含义及环境搭建安装 MPICH官网 Github地址 MPI历史版本下载地址 安装教程 MPI介绍 MPI课程 点对点通信 阻塞型接口 MPI_Send MPI_Recv 阻塞式示例 tag 雅…...

编程日记 2023/10/21 5:40:18

基于MCP协议的EVM区块链交互服务器：为AI智能体赋能Web3操作

1. 项目概述&#xff1a;为AI智能体打开区块链世界的大门 如果你正在构建一个AI智能体&#xff0c;并且希望它能像人类开发者一样&#xff0c;自由地查询以太坊上的余额、读取智能合约的状态&#xff0c;甚至帮你执行一笔代币转账&#xff0c;那么你很可能需要一个桥梁来连接A…...

编程新知 2026/4/26 3:03:09

C语言刷题日记 #6

C语言刷题日记 #7&#xff08;2026.04.14-2026.04.21&#xff09; 本周概览 进入四月的第三周&#xff0c;转专业申请的号角正式吹响了。4月15日至4月21日&#xff0c;于我个人而言是异常忙碌的一周——我咬着牙改完了个人陈述的第九版&#xff0c;提交了转专业申请表&#x…...

编程新知 2026/4/26 1:46:48

终极指南：5分钟学会用KMS_VL_ALL_AIO一键永久激活Windows和Office

终极指南&#xff1a;5分钟学会用KMS_VL_ALL_AIO一键永久激活Windows和Office 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统激活弹窗烦恼吗&#xff1f;Office软件突然变成只…...

编程新知 2026/4/26 1:32:22

zmq源码分析之IO线程绑定时机

文章目录核心流程详细代码分析1. Socket 创建入口2. IO 线程选择3. IO 线程选择逻辑4. Session 创建与绑定5. 连接建立时的 IO 线程绑定6. Session 与 IO 线程关联完整绑定流程技术要点1. IO 线程选择策略2. 绑定机制3. 线程安全总结核心流程 用户创建 socket 到绑定 IO 线程的…...

编程新知 2026/4/26 0:59:28

如何快速移除Unity游戏马赛克：5分钟完成配置的终极指南

如何快速移除Unity游戏马赛克&#xff1a;5分钟完成配置的终极指南 【免费下载链接】UniversalUnityDemosaics A collection of universal demosaic BepInEx plugins for games made in Unity3D engine 项目地址: https://gitcode.com/gh_mirrors/un/UniversalUnityDemosaics…...

编程新知 2026/4/25 22:30:00

前端库作者必看：如何用@babel/plugin-transform-runtime优雅地发布你的npm包（避坑全局污染）

前端库作者必看&#xff1a;如何用babel/plugin-transform-runtime优雅地发布你的npm包&#xff08;避坑全局污染&#xff09; 当你准备将精心开发的前端库发布到npm时&#xff0c;是否考虑过你的polyfill策略可能会污染使用者的全局环境&#xff1f;作为库开发者&#xff0c;我…...

编程新知 2026/4/25 22:21:44

PyAutoGUI 第3章 弹窗交互功能教程（GUI交互，核心3）

PyAutoGUI 弹窗交互功能教程&#xff08;GUI交互&#xff0c;核心3&#xff09; 说明&#xff1a;本教程为 PyAutoGUI 核心操作专项教程&#xff0c;聚焦 GUI 弹窗交互功能&#xff0c;涵盖各类弹窗的使用方法、参数配置、返回值判断&#xff0c;结合实操代码和场景示例&#x…...

编程新知 2026/4/25 21:45:06

SAP FI顾问实战：手把手教你用OB13配置总账科目表（附T004表查询与避坑点）

SAP FI模块深度实战&#xff1a;OB13配置总账科目表的核心逻辑与高阶技巧 在SAP FI模块实施过程中&#xff0c;总账科目表(Chart of Accounts)的配置堪称财务数据架构的基石。作为财务数据组织的核心框架&#xff0c;科目表不仅决定了会计科目如何被分类和使用&#xff0c;更直…...

编程新知 2026/4/25 19:35:37

TwinMarket：多智能体强化学习与博弈论的双市场模拟框架解析

1. 项目概述&#xff1a;当AI智能体遇上“双市场”博弈最近在开源社区里&#xff0c;一个名为TwinMarket的项目引起了我的注意。它来自FreedomIntelligence这个组织&#xff0c;名字本身就很有意思——“双市场”。乍一看&#xff0c;你可能会联想到经济学里的双边市场&#xf…...

编程新知 2026/4/25 19:01:10

【无人机三维路径规划】基于动物迁徙算法AMO实现复杂地形无人机避障三维航迹规划附Matlab代码

&#x1f525; 内容介绍摘要无人机三维路径规划在复杂地形环境中面临着避障和全局最优解搜索的双重挑战。本文提出了一种基于动物迁徙算法&#xff08;AMO&#xff09;的无人机三维避障路径规划方法。该方法利用AMO算法的全局搜索能力和局部寻优能力&#xff0c;有效地解决了复…...

编程新知 2026/4/25 18:19:49