整理關(guān)于Bootstrap列表組的慕課筆記
整理自慕課筆記
列表組是Bootstrap框架新增的一個(gè)組件，可以用來制作列表清單、垂直導(dǎo)航等效果，也可以配合其他的組件制作出更漂亮的組件。
基礎(chǔ)列表組
基礎(chǔ)列表組，看上去就是去掉了列表符號(hào)的列表項(xiàng)，并且配上一些特定的樣式。在Bootstrap框架中的基礎(chǔ)列表組主要包括兩個(gè)部分：
* list-group：列表組容器，常用的是ul元素，當(dāng)然也可以是ol或者div元素
* list-group-item：列表項(xiàng)，常用的是li元素，當(dāng)然也可以是div元素
來看一個(gè)簡單的示例：
<ul class="list-group"> <li class="list-group-item">揭開CSS3的面紗</li> <li class="list-group-item">CSS3選擇器</li> <li class="list-group-item">CSS3邊框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul>
帶徽章的列表組
帶徽章的列表組其實(shí)就是將Bootstrap框架中的徽章組件和基礎(chǔ)列表組結(jié)合在一起的一個(gè)效果。具體做法很簡單，只需要在“l(fā)ist-group-item”中添加徽章組件“badge”：
<ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>揭開CSS3的面 </li> <li class="list-group-item"> <span class="badge">456</span>CSS3選擇器 </li> <li class="list-group-item"> <span class="badge">892</span>CSS3邊框 </li> <li class="list-group-item"> <span class="badge">90</span>CSS3背景 </li> <li class="list-group-item"> <span class="badge">1290</span>CSS3文本 </li> </ul>
帶鏈接的列表組
帶鏈接的列表組，其實(shí)就是每個(gè)列表項(xiàng)都具有鏈接效果。大家可能最初想到的就是在基礎(chǔ)列表組的基礎(chǔ)上，給列表項(xiàng)的文本添加鏈接：
<ul class="list-group">
<li class="list-group-item">
<a href="##">揭開CSS3的面</a>
</li>
<li class="list-group-item">
<a href="##">CSS3選擇器</a>
</li>
...
</ul>
這樣做有一個(gè)不足之處，就是鏈接的點(diǎn)擊區(qū)域只在文本上有效, 但很多時(shí)候，都希望在列表項(xiàng)的任何區(qū)域都具備可點(diǎn)擊。這個(gè)時(shí)候就需要在鏈接標(biāo)簽上增加額外的樣式：“display:block”；雖然這樣能解決問題，達(dá)到需求。但在Bootstrap框架中，還是采用了另一種實(shí)現(xiàn)方式。就是將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就可以達(dá)到需要的效果：
<div class="list-group"> <a href="##" class="list-group-item">圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a> <a href="##" class="list-group-item">玩轉(zhuǎn)Bootstrap</a> </div>
自定義列表組
Bootstrap框加在鏈接列表組的基礎(chǔ)上新增了兩個(gè)樣式：
* list-group-item-heading：用來定義列表項(xiàng)頭部樣式
* list-group-item-text：用來定義列表項(xiàng)主要內(nèi)容
這兩個(gè)樣式最大的作用就是用來幫助開發(fā)者可以自定義列表項(xiàng)里的內(nèi)容，如下面的示例：
<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>
列表項(xiàng)的狀態(tài)設(shè)置
Bootstrap框架也給組合列表項(xiàng)提供了狀態(tài)效果，特別是鏈接列表組。比如常見狀態(tài)和禁用狀態(tài)等。實(shí)現(xiàn)方法和前面介紹的組件類似，在列表組中只需要在對(duì)應(yīng)的列表項(xiàng)中添加類名：
* active：表示當(dāng)前狀態(tài)
* disabled：表示禁用狀態(tài)
來看個(gè)示例：
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網(wǎng)</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a> </div>
多彩列表組
列表組組件和警告組件一樣，Bootstrap為不同的狀態(tài)提供了不同的背景顏色和文本色，可以使用這幾個(gè)類名定義不同背景色的列表項(xiàng)。
* list-group-item-success：成功，背景色綠色
* list-group-item-info：信息，背景色藍(lán)色
* list-group-item-warning：警告，背景色為黃色
* list-group-item-danger：錯(cuò)誤，背景色為紅色
如果你想給列表項(xiàng)添加什么背景色，只需要在“l(fā)ist-group-item”基礎(chǔ)上增加對(duì)應(yīng)的類名：
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網(wǎng)</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a> </div>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas分享海報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
ECharts 是一個(gè)使用JavaScript實(shí)現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識(shí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
JavaScript中函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別詳解
可能很多朋友只知道兩種聲明方式一個(gè)是函數(shù)聲明一個(gè)是函數(shù)表達(dá)式，具體有什么不同沒能說得很好。事實(shí)上，JavaScript的解析器對(duì)函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對(duì)待的。下面看看這兩者到底有什么不同。2016-08-08
微信小程序使用websocket通訊的demo，含前后端代碼，親測(cè)可用
這篇文章主要介紹了微信小程序使用websocket通訊的demo，含前后端代碼，親測(cè)可用,需要的朋友可以參考下2019-05-05
僅Firefox中鏈接A無法實(shí)現(xiàn)模擬點(diǎn)擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫的事件模塊在Firefox5中無法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法，因此模擬點(diǎn)擊直接調(diào)用click方法即可。2011-07-07
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
了解Javascript中函數(shù)作為對(duì)象的魅力
這篇文章主要介紹了了解Javascript中函數(shù)作為對(duì)象的魅力,javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對(duì)象所擁有的特性。并且最重要的，她還可以直接被調(diào)用,需要的朋友可以參考下2019-06-06
微信小程序如何使用canvas二維碼保存至手機(jī)相冊(cè)
這篇文章主要介紹了微信小程序如何使用canvas二維碼保存至手機(jī)相冊(cè)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JS數(shù)組循環(huán)的方式以及效率分析對(duì)比
本文詳細(xì)講解了JS數(shù)組循環(huán)的方式以及效率分析對(duì)比，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
javascript實(shí)現(xiàn)雙端隊(duì)列
這篇文章主要為大家詳細(xì)介紹了使用javascript實(shí)現(xiàn)雙端隊(duì)列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11