Bootstrap框加在鏈接列表組的基礎上新增了兩個樣式：
? list-group-item-heading：用來定義列表項頭部樣式
? list-group-item-text：用來定義列表項主要內容
這兩個樣式最大的作用就是用來幫助開發者可以自定義列表項里的內容，如下面的示例：
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">圖解CSS3</h4>
<p class="list-group-item-text">...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中國</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
運行效果如下：
原理實現：
‘這兩個樣式主要控制不同狀態下的文本顏色：
/*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;
}
我來試試：制作一個“自定義列表組”
文本素材：
1、Canvas繪圖詳解：本課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上......
2、玩轉Bootstrap：Bootstrap框架是一個非常受歡迎的前端開發框架，他能讓后端程序員和不懂設計的前端人員制作出優美的Web頁面或Web應用程序。
3、基于bootstrap的網頁開發：Bootstrap是用于前端開發的工具包，提供了優雅的HTML和CSS規范，并基于jQuery開發了豐富的Web組件。課程介紹了Bootstrap框架的基本知識，并基于Bootstrap框架...
效果圖如下：
參考代碼：
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Canvas繪圖詳解<span class="badge">12</span></h4>
<p class="list-group-item-text">本課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上......</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">玩轉Bootstrap<span class="badge">30</span></h4>
<p class="list-group-item-text">Bootstrap框架是一個非常受歡迎的前端開發框架，他能讓后端程序員和不懂設計的前端人員制作出優美的Web頁面或Web應用程序。 </p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">基于bootstrap的網頁開發<span class="badge">5</span></h4>
<p class="list-group-item-text">Bootstrap是用于前端開發的工具包，提供了優雅的HTML和CSS規范，并基于jQuery開發了豐富的Web組件。課程介紹了Bootstrap框架的基本知識，并基于Bootstrap框架... </p>
</a>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報