整理關(guān)于Bootstrap列表組的慕課筆記
整理自慕課筆記
列表組是Bootstrap框架新增的一個(gè)組件,可以用來(lái)制作列表清單、垂直導(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元素
來(lái)看一個(gè)簡(jiǎn)單的示例:
<ul class="list-group"> <li class="list-group-item">揭開(kāi)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è)效果。具體做法很簡(jiǎn)單,只需要在“l(fā)ist-group-item”中添加徽章組件“badge”:
<ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>揭開(kāi)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="##">揭開(kāi)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”;雖然這樣能解決問(wèn)題,達(dá)到需求。但在Bootstrap框架中,還是采用了另一種實(shí)現(xiàn)方式。就是將ul.list-group使用div.list-group來(lái)替換,而li.list-group-item直接用a.list-group-item來(lái)替換。這樣就可以達(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:用來(lái)定義列表項(xiàng)頭部樣式
* list-group-item-text:用來(lái)定義列表項(xiàng)主要內(nèi)容
這兩個(gè)樣式最大的作用就是用來(lái)幫助開(kāi)發(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中國(guó)</h4> <p class="list-group-item-text">...</p> </a> </div>
列表項(xiàng)的狀態(tài)設(shè)置
Bootstrap框架也給組合列表項(xiàng)提供了狀態(tài)效果,特別是鏈接列表組。比如常見(jiàn)狀態(tài)和禁用狀態(tài)等。實(shí)現(xiàn)方法和前面介紹的組件類似,在列表組中只需要在對(duì)應(yīng)的列表項(xiàng)中添加類名:
* active:表示當(dāng)前狀態(tài)
* disabled:表示禁用狀態(tài)
來(lá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中國(guó)</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中國(guó)</a> </div>
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
理解javascript定時(shí)器中的setTimeout與setInterval
這篇文章主要幫助大家學(xué)習(xí)理解javascript定時(shí)器中的setTimeout與setInterval,從實(shí)例出發(fā)進(jìn)行深入探討,感興趣的小伙伴們可以參考一下2016-02-02使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開(kāi)收起功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開(kāi)收起功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04純js和css實(shí)現(xiàn)漸變色包括靜態(tài)漸變和動(dòng)態(tài)漸變
用javascript實(shí)現(xiàn)一下所謂的動(dòng)態(tài)漸變,考慮動(dòng)態(tài)原因就不上圖了,我來(lái)簡(jiǎn)單介紹下思路2014-05-05?javascript數(shù)組中的slice方法和join??方法
這篇文章主要介紹了?javascript數(shù)組中的slice方法和join??方法,文章內(nèi)容介紹詳細(xì),具有一的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03JavaScript創(chuàng)建命名空間(namespace)的最簡(jiǎn)實(shí)現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過(guò)自定義函數(shù)進(jìn)行類型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關(guān)操作來(lái)實(shí)現(xiàn)命名空間的功能,需要的朋友可以參考一下2007-12-12javascript獲取隱藏元素(display:none)的高度和寬度的方法
這篇文章主要介紹了javascript獲取隱藏元素(display:none)的高度和寬度的方法,實(shí)現(xiàn)方法比較復(fù)雜,需要的朋友可以參考下2014-06-06Bootstrap CSS組件之按鈕組(btn-group)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕組(btn-group),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12通過(guò)實(shí)例理解javascript中沒(méi)有函數(shù)重載的概念
這篇文章主要介紹了通過(guò)實(shí)例理解javascript中沒(méi)有函數(shù)重載的概念,十分的簡(jiǎn)單易懂,需要的朋友可以參考下2015-06-06