【Bootstrap学习 day4】

Bootstrap5 列表组
使用Bootstrap创建列表
可以创建三种不类型的HTML列表:

  • 无序列表—顺序无关紧要的项目列表。无序列表中的列表标有项目符号,例如。、·等ul>li
  • 有序列表—顺序确实很重要的项目列表。有序列表中的列表项用数字标记,例如1、vi等ol>li
  • 定义列表—术语列表及其项目描述。dl>dt

内联列表
如果要使用有序列表或无序列表创建水平菜单,则需要将所有列表项放在一行中(即并排)。可以通过将类.list-inline添加到<ul>或<li>元素来完成此操作。
添加.list-inline属性变为内联列表,简单点说就是把垂直方向的列表变为水平方向。内联列表一般用作菜单(导航)样式。

<h3>内联列表</h3>
	<ul class="list-inline">
		<li class="list-inline-item">标题一</li>
		<li class="list-inline-item">标题二</li>
		<li class="list-inline-item">标题三</li>
	</ul>

在这里插入图片描述
Bootstrap5列表组
列表组是非常有用且灵活的组件,用于以漂亮的方式显示元素列表。在最基本的形式中,列表组只是一个带有.list-group类的无序列表,且列表中的元素带有.list-group-item类
基础的列表组

<ul class="list-group">
	<li class="list-group-item">第一项</li>
	<li class="list-group-item">第二项</li>
	<li class="list-group-item">第三项</li>
</ul>

在这里插入图片描述

设置禁用和活动项
可以将类.active添加到.list-group-item类后面用来指示当前项目元素使活动的。同样,可以将.disabled添加到.list-group-item后面,从而使其看起来是禁用状态。

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

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

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

水平列表组
.list-group-horizontal类添加到.list-group,可以将列表项水平显示而不是垂直显示(并排而不是堆叠)

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

创建编号列表组

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

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

数字式通过CSS(而不是<ol>元素的默认浏览器样式)生成的。
带有徽章的列表组
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果,只需在.list-group-item的基础上追加徽章组件“badge”。

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

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

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

向列表组添加自定义内容
bootstrap框架在链接列表组的基础上增加了两个样式:
.list-group-item-heading:用来定义列表项头部样式
.list-group-item-text:用来定义列表项主要内容
这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker重量级容器预警监控系统CIG

文章目录 一、介绍CIG二、CIG&#xff0c;compose部署2.1 docker-compose运行CIG2.2 grafana配置1.配置数据源2.选择influxdb数据源3.配置数据库的连接信息4.create dashboard5.配置数据源6.大功告成 一、介绍CIG C:CAdvisor&#xff0c;监控收集&#xff0c;默认存储最近2分钟…

MYSQL的UPDATE时锁表机制

&#xff08;笔记&#xff0c;只为获取流量券&#xff09; MySQL中&#xff0c;UPDATE 操作涉及到行级锁和表级锁的概念&#xff0c;具体取决于事务隔离级别和被更新的条件, 无索引的情况下&#xff1a; 当表没有索引的情况下&#xff0c;UPDATE 操作通常会涉及到表级锁。这是…

机器学习的一般步骤

机器学习专注于让机器从大量的数据中模拟人类思考和归纳总结的过程&#xff0c;获得计算模型并自动判断和推测相应的输出结果。机器学习的一般步骤可以概括为以下几个阶段&#xff1a; 数据收集和准备&#xff1a; 收集与问题相关的数据&#xff0c;并确保数据的质量和完整性。…

详解—数据结构—<常用排序>基本实现和代码分析

目录 一.排序的概念及其运用 1.1排序的概念 1.2排序运用​编辑 1.3 常见的排序算法​编辑 二.常见排序算法的实现 2.1 插入排序 2.1.1基本思想&#xff1a; 2.1.2直接插入排序&#xff1a; 2.1.3 希尔排序( 缩小增量排序 ) 2.2 选择排序 2.2.1基本思想&#xff1a; …

unity 保存和加载窗口布局

这么简单的事网上一堆废话文章 右上角&#xff0c;Layout点开后有保存和删除 要切换布局点红框里的已经保存的布局

Go语言学习第二天

Go语言数组详解 var 数组变量名 [元素数量]Type 数组变量名&#xff1a;数组声明及使用时的变量名。 元素数量&#xff1a;数组的元素数量&#xff0c;可以是一个表达式&#xff0c;但最终通过编译期计算的结果必须是整型数值&#xff0c;元素数量不能含有到运行时才能确认大小…

2020年认证杯SPSSPRO杯数学建模B题(第一阶段)分布式无线广播全过程文档及程序

2020年认证杯SPSSPRO杯数学建模 B题 分布式无线广播 原题再现&#xff1a; 以广播的方式来进行无线网通信&#xff0c;必须解决发送互相冲突的问题。无线网的许多基础通信协议都使用了令牌的方法来解决这个问题&#xff0c;在同一个时间段内&#xff0c;只有唯一一个拿到令牌…

是时候将javax替换为Jakarta了

开始 相信很多朋友在使用新版本的Spring的时候&#xff0c;发现了一些叫jakarta的包&#xff0c;看起来有点陌生。 很多时候&#xff0c;比较纠结不知道该导入哪一个包。 jakarta其实就是之前的javax。 主要JavaEE相关的&#xff0c;从之前javax名字也可以看出来&#xff0…

LeetCode刷题--- 单词搜索

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述…

启封涂料行业ERP需求分析和方案分享

涂料制造业是一个庞大而繁荣的行业 它广泛用于建筑、汽车、电子、基础设施和消费品。涂料行业生产不同的涂料&#xff0c;如装饰涂料、工业涂料、汽车涂料和防护涂料。除此之外&#xff0c;对涂料出口的需求不断增长&#xff0c;这增加了增长和扩张的机会。近年来&#xff0c;…

Livox-Mid-360 固态激光雷达ROS格式数据分析

前言&#xff1a; Livox-Mid-360 官方采用livox_ros_driver2ROS功能包发布ROS格式的数据&#xff0c;livox_ros_driver2可以把Livox原始雷达数据转化成ROS格式并以话题的形式发布出去。 下面列举一些雷达的基本概念&#xff1a; 点云帧&#xff1a;雷达驱动每次向外发送的一…

基于MATLAB的卡方分布,瑞利分布,T与F分布(附完整代码与例题)

一. 卡方分布 1.1 数学理论 首先我们来看下伽玛分布的概率密度函数&#xff1a; 其中&#xff1a; 令&#xff0c;就可以得到一个新的分布&#xff0c;这个分布在概率论上被叫做卡方分布。卡方分布也可以写做分布。其概率密度函数则为&#xff1a; 卡方分布要求参数k为正整数…

利用 PEB_LDR_DATA 结构枚举进程模块信息

1. 引言 我们常常通过很多方法来获取进程的模块信息&#xff0c;例如 EnumProcessModules 函数、CreateToolhelp32Snapshot 函数、WTSEnumerateProcesses 函数、ZwQuerySystemInformation 函数等。但是调用这些接口进行模块枚举的原理是什么我们并不知道。通过学习 PEB 中 PEB…

polar CTF上传

1、题目 2、经过测试.htaccess绕过 三行代码解析&#xff1a; 将上传的.jpg文件解析成php文件 auto_append_file包含上传的文件 将上传的文件进行解码 AddType application/x-httpd-php .jpg php_value auto_append_fi\ le "php://filter/convert.base64-decode/resourc…

数据结构与算法-排序

&#x1f31e;入冬 时寒 添衣 勿病 要开心 排序 &#x1f388;1.排序的基本概念&#x1f388;2.排序的分类&#x1f52d;2.1插入排序&#x1f50e;2.1.1直接插入排序&#x1f50e;2.1.2折半插入排序&#x1f50e;2.1.3希尔排序 &#x1f52d;2.2交换排序&#x1f50e;2.2.1冒泡…

Python中的并发编程(7)异步编程

异步编程 Python3.4后新增了asyncio模块&#xff0c;支持异步编程。 异步是在一个线程中通过任务切换的方式让多个任务”同时“进展。asyncio不涉及线程/进程切换&#xff0c;减少了线程/进程创建、上下文切换的开销&#xff0c;更轻量级。 asyncio的核心是事件循环&#xff0…

【设计模式】外观模式

文章目录 前言一、外观模式1.案例2.优缺点3.使用场景4.源码解析 总结 前言 【设计模式】外观模式 一、外观模式 有些人可能炒过股票&#xff0c;但其实大部分人都不太懂&#xff0c;这种没有足够了解证券知识的情况下做股票是很容易亏钱的&#xff0c;刚开始炒股肯定都会想&am…

c语言:把二维数组降至一维|练习题

一、题目 把二维数组降为一围数组 如图&#xff1a; 二、代码截图【带注释】 三、源代码【带注释】 #include <stdio.h> int main() { int arr2[3][3];//设置二维数组 int arr1[10];//设置一维数组 int z0;//一维数组自增量 printf("输入一个二维数…

面试算法78:合并排序链表

题目 输入k个排序的链表&#xff0c;请将它们合并成一个排序的链表。 分析&#xff1a;利用最小堆选取值最小的节点 用k个指针分别指向这k个链表的头节点&#xff0c;每次从这k个节点中选取值最小的节点。然后将指向值最小的节点的指针向后移动一步&#xff0c;再比较k个指…

Net6 Core webApi发布到IIS

Net6 Core Api发布到IIS不同于webapi&#xff0c;依赖框架不同&#xff0c;配置也移至项目内Program.cs 一、发布到指定文件夹和IIS&#xff0c;不过注意IIS应用程序池选择的是 “无托管代码“ 在IIS管理器中点击浏览&#xff0c;访问接口路径报500.19&#xff0c;原因是所依赖…