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,一经查实,立即删除!

相关文章

poj1006生理周期(中国剩余定理)

1 /*2 中国剩余定理可以描述为:3 若某数x分别被d1、、…、dn除得的余数为r1、r2、…、rn,则可表示为下式:4 xR1r1R2r2…RnrnRD5 其中R1是d2、d3、…、dn的公倍数,而且被d1除,余数为1;(称为R1相对…

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

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

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

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

codeforces——Little Pony and Sort by Shift

1 /*2 题目大意:给你一个序列,不断地将最后边的数值移动到最前边,问最少经过多少次可以变成一个单调递增的序列! 3 如果不能则输出-1。 4 如果该序列按照不断从后向前移动排序成功,那么该序列要么只有一个单调递增的…

用python玩转数据慕课答案第三周_大学慕课用Python玩转数据答案公众号

抹灰用石灰膏的熟化时间不少于多少天?16只兔子,分别装在5个笼子里,每个笼子里的小兔子只数都不相等,笼子里最不可能出现的只数是( )。患者,女,44岁。患心肌梗死住院治疗,首次静脉泵入硝酸甘油时…

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

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

codeforces——Little Pony and Expected Maximum

1 /*2 我们枚举每次选择最大数值的情况:m个数, 投掷n次3 最大值是1: 1种4 2: 2^n-15 3: 3^n-2^n6 .....7 m: m^n-(m-1)^n8 9 所以最后的结果sum((k/m)^n …

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

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

计算机控制基础知识,最新 分析计算机控制系统及其运算基础知识-精品

分析计算机控制系统及其运算基础知识系统程序层的工作基础建立在控制系统改造和扩充过的机器,下文就是关于控制系统及其运算基础知识论文。随着技术的飞进发展,计算机控制系统及其操作过程的运算程序研究已成为一个热门话题,本文主要对计算机…

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

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

Uvaoj 11624 - Fire!

1 /*************************************************************************2 > File Name: test.cpp3 > Author: HJZ4 > Mail: 2570230521qq.com 5 > Created Time: 2014年08月03日 星期日 07时26分58秒6 ********************************…

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

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

中国科学院大学计算机金智,金智-中国科学院大学-UCAS

发表论文(1) Carrier-Number-Fluctuation induced ultralow 1/f noise level in top-gated graphene field effect transistors, ACS Applied Materials & Interfaces, 2017, 通讯作者(2) The two timescales in the charge trapping mechanism for the hysteresiss behavi…

win7下搭建PHP mysql_简单介绍win7下搭建apache+php+mysql开发环境

环境目录:E:\dev​一、Apache我们下载VC11运行库的1.安装说明:运行apache安装程序,方法非常简单,弹安装界面后一直“next”接着会出现一个界面,需要填写3个内容,分别为:Network Domain、Server …

poj 3101Astronomy(圆周追击+分数最小公倍数)

1 /*2 本题属于圆周追击问题:3 假设已知两个圆周运动的物体的周期分别是a ,b, 设每隔时间t就会在同一条直线上 4 在同一条直线上的条件是 角度之差为 PI !5 那么就有方程 (2PI/a - 2PI/b)* tPI 所以就有 tab/(2|a-b|);6 …

广东省计算机应用考试试题,2015广东省计算机等级考试试题 二级C试题最新考试试题库...

1、在计算机的应用中,“DSS”表示( B )A、管理信息系统 B、决策支持系统C、办公自动化 D、人工智能2、计算机病毒是可以造成机器故障的( D )A、一种计算机设备 B、一种计算机芯片C、一种计算机部件 D、一种计算机程序3、防范病毒的有效手段,不正确的是( …

mysql查找大小写_mysql查询不区分大小写

摘自:http://www.jb51.net/article/70884.htm当我们输入不管大小写都能查询到数据,例如:输入 aaa 或者aaA ,AAA都能查询同样的结果,说明查询条件对大小写不敏感。解决方案一:于是怀疑Mysql的问题。做个实验&#xff1a…

poj 2492A Bug's Life(并查集)

1 /*2 目大意:输入一个数t,表示测试组数。然后每组第一行两个数字n,m,n表示有n只昆虫,编号从1—n,m表示下面要输入m行交配情况,每行两个整数,表示这两个编号的昆虫为异性,要交配。3 要求统计交配…

mysql 有外键 怎么插入数据_外键约束的表怎么插入数据

有外键的情况应该先添加主表数据,再添加副表数据。如:有以下两张表班级表:CLASSID NAME1 一班2 二班学生表:SID NAME CLASSID1 张三 12 李四 13 王五 2其中学生表中的CLASSID是班级表CLASSID的外键。现在要求在学生表中添加一条SI…

计算机在岗位上的应用,计算机岗位应用论文.doc

计算机岗位应用论文计算机岗位应用论文计算机岗位应用论文计算机岗位应用论文计算机岗位应用论文进入到新世纪以来,随着我国国民经济水平的提升,我国的计算机也得到了迅速的发展,计算机应用技术也已经广泛的应用到了各个行业中,并且计算机应用技术对于促进这些行业的快速发展也…