Bootstrap的列表组相关知识

目录

  • 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>

运行效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迁移kubelet、docker和containerd工作目录

文章目录 问题背景迁移Docker停止 Docker 服务修改配置移动文件重新启动 Docker 服务 containerd停止服务修改配置移动文件重新启动服务 kubelet&#xff08;遇到问题待解决&#xff09;停止服务修改配置移动文件&#xff08;遇到问题待解决&#xff09;重新启动服务 使用的版本…

2023年拼多多双11百亿补贴新增单件立减玩法介绍

2023年拼多多双11百亿补贴新增单件立减玩法介绍 拼多多启动了11.11大促活动&#xff0c;主题为“天天11.11&#xff0c;天天真低价”。消费者享受多重优惠&#xff0c;包括满减、百亿补贴和单件立减等。百亿补贴新增玩法&#xff0c;有超过20000款品牌商品参与单件立减活动。 …

iOS逆向工程之Theos

如果你对iOS逆向工程有所了解&#xff0c;那么你对Tweak并不陌生。那么由Tweak我们又会引出Theos, 那么什么是Theos呢&#xff0c;简单一句话&#xff0c;Theos是一个越狱开发工具包&#xff0c;Theos是越狱开发工具的首先&#xff0c;因为其最大的特点就是简单。大道至简&…

10月面试js基础

作用域 变量的可用范围 作用域链 保存的变量的使用顺序的一个链&#xff08;也就是路线图&#xff09;&#xff0c; 被称为作用域链。 当在Javascript中使用一个变量的时候&#xff0c;首先Javascript引擎会尝试在当前作用域下去寻找该变量&#xff0c;如果没找到&#xff0c;再…

Hook原理--逆向开发

今天我们将继续讲解逆向开发工程另一个重要内容--Hook原理讲解。Hook&#xff0c;可以中文译为“挂钩”或者“钩子”&#xff0c;逆向开发中改变程序运行的一种技术。按照如下过程进行讲解 Hook概述Hook技术方式fishhook原理及实例符号表查看函数名称总结 一、Hook概述 在逆…

Lake Formation 和 IAM 之间的区别与联系

IAM 和 Lake Formation 都是 AWS 上的权限管理服务,且默认都是自动开启并生效的,只是如果你没有特别配置过它们,可能感觉不到它们的存在,特别是Lake Formation(后文简写为 LF),通常情况下都是“透明”的,但它确实在每次请求时进行了权限检查。本文会详细介绍一下两者之…

Mac GPU MPS常用方法

Requirements Mac computers with Apple silicon or AMD GPUs macOS 12.3 or later Python 3.7 or later Xcode command-line tools: xcode-select --install 判断是否可用 import torch if torch.backends.mps.is_available():mps_device torch.device("mps")x …

【数据结构】堆综合的运用

目录 一&#xff0c;运用堆结构进行排序 二&#xff0c;经典的Topk问题 一&#xff0c;运用堆结构进行排序 当我们用堆结构进行排序时&#xff0c;首先要明确的是升序排列要建大堆&#xff0c;降序排列要建小堆&#xff0c;不是说升序建小堆就不行&#xff0c;降序建大堆就不…

【最短路径算法】一文掌握Dijkstra算法,详解与应用示例+代码

目录 1 Dijkstra算法 2 Dijkstra算法的步骤 3 Dijkstra算法python实现 4 Dijkstra算法应用示例详解 1 Dijkstra算法 Dijkstra算法&#xff08;迪杰斯特拉算法&#xff09;是一种用于在加权图中查找从一个起始节点到所有其他节点的最短路径的算法。该算法最初由荷兰计算机科…

offsetof宏计算某变量相对于首地址的偏移量

宏&#xff1a;offsetof的使用 //offsetof (type,member) //type是结构体的类型名&#xff0c;member是结构体中的成员名。struct Student {char name[5]; // 姓名int age; // 年龄float score; // 成绩 };int main() {struct Student s;printf("%zd\n", off…

【转载】 Bytedance火山引擎智能拥塞控制算法 VICC

BytedanceTechBlog : 火山引擎实时、低延时拥塞控制算法的优化实践 火山引擎 网站如何利用播放器节省20%点播成本点击下面的链接进入原文:原创 翟强俊、唐辉 字节跳动技术团队 2023-10-18 11:59 发表于北京 一些专利摘要 火山引擎智能拥塞控制算法 VICC(Volcano Intelligent…

Android微信逆向--实现发朋友圈动态

Android微信逆向--实现发朋友圈动态 0x0 前言# 最近一直在研究Windows逆向的东西&#xff0c;想着快要把Android给遗忘了。所以就想利用工作之余来研究Android相关的技术&#xff0c;来保持对Android热情。调用微信代码来发送朋友圈动态一直是自己想实现的东西&#xff0c;研…

邻接表存储图或者树

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家来访。 介绍 每个顶点都作为头节点&#xff0c;并且存在一个一维数组中h[N]。树就是相当于一种有向图…

redis哨兵模式详解

目录 前言&#xff1a; 手动干预主节点挂的情况 哨兵节点操作流程 哨兵重新选取主节点流程 主观下线 客观下线 哨兵节点选leader 挑选从节点作为主节点 前言&#xff1a; redis在主从模式下&#xff0c;主节点服务就显的尤为重要。为了保证redis集群的高可用&#xff0…

论文阅读-FCD-Net: 学习检测多类型同源深度伪造人脸图像

一、论文信息 论文题目&#xff1a;FCD-Net: Learning to Detect Multiple Types of Homologous Deepfake Face Images 作者团队&#xff1a;Ruidong Han , Xiaofeng Wang , Ningning Bai, Qin Wang, Zinian Liu, and Jianru Xue &#xff08;西安理工大学&#xff0c;西安交…

GB28181学习(十)——视音频文件下载

要求 SIP服务器接收到媒体接收者发送的视音频文件下载请求后向媒体流发送者发送媒体文件下载命令&#xff0c;媒体流发送者采用RTP将视频流传输给媒体流接收者&#xff0c;媒体流接收者直接将视频流保存为媒体文件&#xff1b;媒体流接收者或SIP服务器可通过配置查询等方式获取…

【Hello Algorithm】暴力递归到动态规划(五)

死亡概率问题 现在给定你三个参数 N M K 怪兽有 N 滴血 等着英雄来砍自己 英雄每一次打击会让怪兽流失 0 ~ M 滴血 概率相同 请求在K次之后 英雄把怪兽砍死的概率 递归版本 面对这个问题 我们首先来想递归函数怎么写 首先是返回值 我们无法直接返回一个概率给上层 所以我…

gRPC之gRPC转换HTTP

1、gRPC转换HTTP 我们通常把RPC用作内部通信&#xff0c;而使用Restful Api进行外部通信。为了避免写两套应用&#xff0c;我们使用grpc- gateway 把gRPC转成HTTP。服务接收到HTTP请求后&#xff0c;grpc-gateway把它转成gRPC进行处理&#xff0c;然后以JSON 形式返回数据。…

Go 语言的垃圾回收机制:自动化内存管理

在编程的世界中&#xff0c;内存管理一直是一个重要的问题。不正确的内存管理可能导致内存泄漏和程序崩溃。Go 语言以其高效的垃圾回收机制而闻名&#xff0c;使开发者从手动内存管理的烦恼中解脱出来。本文将深入探讨Go语言的垃圾回收机制&#xff0c;介绍它的工作原理以及如何…

消息队列 RocketMQ 消息重复消费问题(原因及解决)

目录 1.出现重复消费的原因 2.解决 2.1 数据库插入法 2.2 使用布隆过滤器 2.2.1 添加hutool的依赖 2.2.2 测试生产者 2.2.2 测试消费者 1.出现重复消费的原因 BROADCASTING(广播) 模式下&#xff0c;所有注册的消费者都会消费&#xff0c;而这些消费者通常是集群部署的…