html 实现列表组并排,列表组--自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式:

☑list-group-item-heading:用来定义列表项头部样式

☑list-group-item-text:用来定义列表项主要内容

这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容,如下面的示例:

图解CSS3

...

Sass中国

...

运行效果如下:

0d95e1bbab5c28a8ee80497f8c89ba5f.png

原理实现:

‘这两个样式主要控制不同状态下的文本颜色:

/*bootstrap.css文件第4850行~第4852行*/

a.list-group-item .list-group-item-heading {

color: #333;

}

/*bootstrap文件第4865行~第4874行*/

.list-group-item.disabled .list-group-item-heading,

.list-group-item.disabled:hover .list-group-item-heading,

.list-group-item.disabled:focus .list-group-item-heading {

color: inherit;

}

.list-group-item.disabled .list-group-item-text,

.list-group-item.disabled:hover .list-group-item-text,

.list-group-item.disabled:focus .list-group-item-text {

color: #777;

}

/*bootstrap.css文件第4883行~第4898行*/

.list-group-item.active .list-group-item-heading,

.list-group-item.active:hover .list-group-item-heading,

.list-group-item.active:focus .list-group-item-heading,

.list-group-item.active .list-group-item-heading > small,

.list-group-item.active:hover .list-group-item-heading > small,

.list-group-item.active:focus .list-group-item-heading > small,

.list-group-item.active .list-group-item-heading > .small,

.list-group-item.active:hover .list-group-item-heading > .small,

.list-group-item.active:focus .list-group-item-heading > .small {

color: inherit;

}

.list-group-item.active .list-group-item-text,

.list-group-item.active:hover .list-group-item-text,

.list-group-item.active:focus .list-group-item-text {

color: #e1edf7;

}

/*bootstrap.css文件第4987行~第4994行*/

.list-group-item-heading {

margin-top: 0;

margin-bottom: 5px;

}

.list-group-item-text {

margin-bottom: 0;

line-height: 1.3;

}

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

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

相关文章

queryselectorall 怎么取name_用这个方法,我爬取了《王者荣耀》《英雄联盟》等游戏皮肤图片...

本文简介:本文使用Python制作爬虫,来爬取《英雄联盟》《王者荣耀》《神之浩劫》等游戏官方网站的英雄皮肤图片。可以作为新手爬虫的练手实战案例!!爱打游戏的各位肯定也是对游戏里面制作精美,妩媚无比或是帅气逼人的皮…

云端计算机可以玩游戏么,手机掌上云电脑是什么?为什么可以玩PC游戏?

原标题:手机掌上云电脑是什么?为什么可以玩PC游戏?经常会在一些短视频平台上看到别人用云电脑的应用在手机上玩PC游戏,那么这个掌上云电脑的应用到底是什么呢?为什么可以玩PC游戏呢?按照以往的理解&#xf…

计算机组策略怎么设置远程桌面,组策略 之   自动启用客户端远程桌面功能

在企业里进行管理的时候,有时需要利用远程桌面来管理客户端计算机,在一般情况下,往往需要客户端启用此功能,有没有好的办法,让客户端自动启用呢?当然可以,我们可以通过组策略的形式来完成。实施…

华北水利水电大学c语言程序设计四_我校代表队在“中国高等计算机大赛——团体程序设计天梯赛” 中喜获佳绩...

近日,第四届“中国高校计算机大赛——团体程序设计天梯赛”全国总决赛获奖名单公布,我校以全国高校排名第84位,河南省高校第4名的成绩获得河南省高校二等奖。我校派出的“NCWU_面壁者”,“NCWU_弹星者”和“NCWU_执剑人”三支队伍…

当我不再依赖你的时候说说_不要依赖任何人说说 不要指望别人的经典话

1、静下心慢慢变得沉稳,不再依赖任何人, 珍惜身边人 ,不强求不勉强每天都要很开心。2、的确没什么人可以陪你一辈子,所以在那些难熬的日子过去之后,将会不再依赖任何人成长。3、自己一个人走在路上,才发现依…

android 版本更新工具类_报表分析工具FastReport .Net 2021年超大版本更新,实现了对.NET 5的支持...

在FastReport .NET 2021.1的新版本中,我们实现了对.NET 5的支持。添加了新条形码-Deutsce Post Leitcode。将RTF转换为报告对象的算法已得到显着改进。并且还添加了用于转换数字的新功能。欢迎下载体验。(点击下方按钮下载)立即点击下载FastR…

poj2186Popular Cows(Kosaraju算法--有向图的强连通分量的分解)

1 /*2 题目大意:有N个cows, M个关系3 a->b 表示 a认为b popular;如果还有b->c, 那么就会有a->c 4 问最终有多少个cows被其他所有cows认为是popular!5 6 思路:强连通分量中每两个节点都是可达的&#xff…

Uvaoj10054 - The Necklace

1 /*2 题意:打印欧拉回路!3 思路:开始时不明白,dfs为什么是后序遍历? 4 因为欧拉回路本身是一条回路,那么我们在dfs时,可能存在提前找到回路,这条回路可能不是欧拉回路&…

s7-1200跟mysql_让西门子S7-1200直接连接MySQL数据库!!!

最近项目上有个需求,要把采集的数据存储到数据库中,当前西门子有很多方法,必读IDB,还有通过WINCC的脚本,第三方的软件等等,但是随着发展,有些需求希望设备直接到数据库,比如云端的RD…

win7个人计算机的ip地址,win7计算机ip地址查询_win7本机ip地址查询

2016-12-09 11:40:21查找计算机的ip地址的方法:点击你的电脑桌面左下角的“开始”找到“运行”点击运行, 在出现的对话框里面输入“cmd” 点击确定然后就会出现一个黑色的命令行窗口,你会看到“&...2016-12-19 15:59:44手机设置静态IP 1、点设置-线网络 2、WLAN…

最全的mysql 5.7.13_最全的mysql 5.7.13 安装配置方法图文教程(linux) 强烈推荐!

linux环境Mysql 5.7.13安装教程分享给大家,供大家参考,具体内容如下1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysq…

iis 日志 post数据_云原生日志的趋势(1):logscape和logiq

作为日志产品的PM,跟进国内外日志产品动向是个长期工作。这几天翻新一些历史记录,发现logscape自2017年开源以来,突然2019年10月又更新了一会。于是顺着翻翻logscape的github账号,起了兴致来写点文字。https://github.com/logscap…

大学计算机基础总结,大学计算机基础第二章总结

数:计算机的数据的基本形态是二进制数数制:可以直接进行数学计算数字码制:用来表示不同对象属性● 数制(计数体制)多位数中每一位的构成方法以及实现从低位到高位的进位规则(也叫做进制)▲ 常用数制:R进制有R个数码,数…

获取list泛型_泛型

泛型什么是泛型?为什么使用泛型?泛型的出现意味着编写的代码可以被不同类型的对象所重用,提升了代码的重用性。泛型的本质是参数化类型,即将所需操作的数据类型设置为一个参数。 举个实际中的栗子:我们需要设计一个柜子…

w10计算机字体怎么设置在哪里设置,如何设置修改win10系统电脑的显示字体

如何设置修改win10系统电脑的显示字体腾讯视频/爱奇艺/优酷/外卖 充值4折起今天给大家介绍一下如何设置修改win10系统电脑的显示字体的具体操作步骤。1. 首先鼠标左键开始,然后在菜单下的左下角选择设置图标。2. 进入Windows 设置后,单击个性化。3. 接着…

powerdesigner mysql 自增主键_PowerDesigner Mysql 主键自增、初始值、字符集

自增在你所要设为自增型的键上(比如你的id)双击,弹出一个Column Properties对话框,右下角有一个Identify的选择框,选中它OK,就可以了。 再去查看Preview,就能看到AUTO_INCREMENT。起始值默认自增字段从1开始, 如果需要…

计算机设置从u盘启动怎么办,电脑设置从u盘启动盘启动出现蓝屏该怎么解决?

电脑设置从u盘启动蓝屏怎么办?我们在电脑遇到系统等问题时,经常会选择使用u盘重装系统,这种重装方式可以说是目前最便捷实用的了。但是最近又有用户反映将U盘设置为第一启动项后,电脑没办法从u盘启动,出现了蓝屏的情况&#xff0…

ambari mysql jar_从零开始安装 Ambari (3) -- 安装 Ambari

1. 安装yum -y install ambari-server2. ambari server 需要一个数据库存储元数据,默认使用的 Postgres 数据库。默认的用户名和密码是: ambari/bigdata 。但是一般情况下,后面还要安装 hive 和 Ranger,也需要一个存元数据的数据库…

服务器2012系统在dos卸载,Windows系统下彻底删除Windows.old 文件夹的方法

系统是直接硬盘安装的,导致c盘产生了旧系统的文件夹Windows.old,占用很大的磁盘空间,删也删不掉,咋办?不要紧,下面大神来教你神操作!!!1、打开“计算机”,选择…

backupexec mysql_MySQL备份可能遇到的坑

MySQL备份工具,支持各种参数选项,使用不同的选项极有可能影响备份处理过程。本文使用我们常规认为合理的备份参数,测试/验证是否存在容易忽视的坑# 常规备份参数# mysqldumpshell> mysqldump --single-transaction --master-data2 -B repl…