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 实现列表组并排,列表组--自定义列表组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。