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

2024-06-01 11:06:50

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

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

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

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

图解CSS3

...

Sass中国

...

运行效果如下：

原理实现：

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

/*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;

}

html 实现列表组并排,列表组--自定义列表组相关推荐

sharepoint2010 创建自定义列表
sharepoint2010 创建自定义列表分类: sharepoint20102014-04-04 14:06 106人阅读评论(0) 收藏举报转:http://boke.25k5.com/ ...
html自定义列表嵌套,HTML 列表
HTML 支持有序.无序和定义列表: HTML 列表有序列表The first list item The second list item The third list item无序列表List ...
html5有序列表无序列表自定义列表
html5有序列表无序列表自定义列表 1.无序列表无序列表代码如下 <h2>1.无序列表</h2><p>你喜欢的水果有哪些</p><ul> ...
HTML列表标签及自定义列表的应用
1.无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于<li>. 也可以通过CSS改变项目符号, ...
excel自定义排序出错_使用Excel自定义列表按您的方式进行排序
excel自定义排序出错 You know how to sort an Excel list alphabetically, and with Excel 2007 you can even sor ...
有序列表、无序列表、自定义列表
有序列表.无序列表.自定义列表 1.有序列表 <ol type="A" start="3"><li>有 ...
HTML无序列表、有序列表、自定义列表标签的基本知识
今天的文章主要讲述HTML无序列表.有序列表.自定义列表标签的基本知识,和在网页中的效果一.列表的应用场景场景: 在网页中按照行展示关联性的内容,如:新闻列表.排行榜.账单等特点: 按照行的方式 ...
无序列表，有序列表，自定义列表
无序列表-没有顺序的一组内容语法:<ul> 定义无序列表 <li></li> (列表项) </ul> 语义:用于将没有数字顺序的一组内容或数据进行 ...
SP2010开发和VS2010专家食谱--第一章节--列表和事件接收器(6)--使用列表事件接收器...
直到现在我们学习了列表项目事件接收器,现在我们学习一下列表事件接收器吧.本文章中,无论何时在网站创建新列表,我们需要记录监察项到另一个列表. Getting ready 创建自定义列表EventRec ...

最新文章

热门文章