溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Bootstrap中列表組組件的使用示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
列表組可以用來(lái)制作列表清單、垂直導(dǎo)航等效果，也可以配合其他的組件制作出更漂亮的組件，列表組在bootstrap框架中也是一個(gè)獨(dú)立的組件，所以也對(duì)應(yīng)有自己獨(dú)立源碼：
LESS：list-group.less
SASS:_list-group.scss
列表組看上去就是去掉了列表符號(hào)的列表項(xiàng)，并且配上一些特定的樣式，在bootstrap框架中的基礎(chǔ)列表組主要包括兩個(gè)部分：
list-group:列表組容器，常用的是ul元素，也可以是ol或p元素
list-group-item:列表項(xiàng)，常用的是li元素，也可以是p元素
對(duì)于基礎(chǔ)列表組并沒(méi)有做過(guò)多的樣式設(shè)置，主要設(shè)置了其間距、邊框和圓角等；
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}來(lái)看一個(gè)例子：
<h2>基礎(chǔ)列表組</h2> <ul class="list-group"> <li class="list-group-item">臘肉土豆?fàn)F飯</li> <li class="list-group-item">香辣風(fēng)味炸雞塊</li> <li class="list-group-item">香菜皮蛋豆腐</li> <li class="list-group-item">荷蘭豆炒馬蹄</li> <li class="list-group-item">山楂排骨</li> <li class="list-group-item">韭菜炒河蝦</li> </ul>
帶徽章的列表組其實(shí)就是將bootstrap框架中的徽章組件和基礎(chǔ)列表組件結(jié)合在一起的一個(gè)效果，具體做法很簡(jiǎn)單，只需在.list-group-item的基礎(chǔ)上追加徽章組件“badge”
實(shí)現(xiàn)原理：
給徽章設(shè)置了一個(gè)右浮動(dòng)，當(dāng)然如果兩個(gè)徽章同時(shí)在一個(gè)列表項(xiàng)中出現(xiàn)時(shí)，還設(shè)置了它們之間的距離
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}例子：
<h2>帶徽章的列表組</h2> <ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span> 臘肉土豆?fàn)F飯 </li> <li class="list-group-item"> <span class="badge">20</span> 香辣風(fēng)味炸雞塊 </li> <li class="list-group-item"> <span class="badge">12</span> 香菜皮蛋豆腐 </li> <li class="list-group-item"> <span class="badge">5</span> 荷蘭豆炒馬蹄 </li> <li class="list-group-item"> <span class="badge">8</span> 山楂排骨 </li> <li class="list-group-item"> <span class="badge">15</span> 韭菜炒河蝦 </li> </ul>
帶連接的列表組其實(shí)就是每個(gè)列表項(xiàng)都具有鏈接效果，一般讓人想到的就是在基礎(chǔ)列表組的基礎(chǔ)上，給列表項(xiàng)的文本添加鏈接，如：
<ul class="list-group"> <li class="list-group-item"><a href="#">臘肉土豆?fàn)F飯</a></li> <li class="list-group-item"><a href="#">香辣風(fēng)味炸雞塊</a></li> <li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li> <li class="list-group-item"><a href="#">荷蘭豆炒馬蹄</a></li> <li class="list-group-item"><a href="#">山楂排骨</a></li> <li class="list-group-item"><a href="#">韭菜炒河蝦</a></li> </ul>
效果如下：
這樣做有個(gè)不足之處，就是鏈接的點(diǎn)擊區(qū)域只在文本上有效；但很多時(shí)候都希望在列表項(xiàng)的任何區(qū)域都具備可點(diǎn)擊，這是就需要在鏈接標(biāo)簽上增加額外的樣式：display：block；但在bootstrap框架中，還是采用了另一種實(shí)現(xiàn)方式，就是將ul.list-group用p.list-group來(lái)替換，li.list-group-item用a.list-group-item來(lái)替換，這樣就可以達(dá)到需要的效果。
實(shí)現(xiàn)原理：
如果使用a.list-group-item,樣式就需要做一定的處理，如：去文本下劃線，增加懸浮效果等；下面是css源碼：
a.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}帶鏈接列表組的運(yùn)用：
<h2>帶鏈接的列表組</h2> <ul class="list-group"> <a class="list-group-item" href="#">臘肉土豆?fàn)F飯</a> <a class="list-group-item" href="#">香辣風(fēng)味炸雞塊</a> <a class="list-group-item" href="#">香菜皮蛋豆腐</a> <a class="list-group-item" href="#">荷蘭豆炒馬蹄</a> <a class="list-group-item" href="#">山楂排骨</a> <a class="list-group-item" href="#">韭菜炒河蝦</a> </ul>
效果如下：
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)容
實(shí)現(xiàn)原理：
這兩個(gè)樣式主要控制不容狀態(tài)下的文本顏色，下面是css源碼：
a.list-group-item .list-group-item-heading {
color: #333;
}
.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;
}
.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;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}自定義列表組的運(yùn)用
<h2>自定義列表組</h2> <ul class="list-group"> <a class="list-group-item"> <h5 class="list-group-item-heading">列表1標(biāo)題</h5> <p class="list-group-item-text">列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表2標(biāo)題</h5> <p class="list-group-item-text">列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表3標(biāo)題</h5> <p class="list-group-item-text">列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表4標(biāo)題</h5> <p class="list-group-item-text">列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表5標(biāo)題</h5> <p class="list-group-item-text">列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表6標(biāo)題</h5> <p class="list-group-item-text">列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容</p> </a> </ul>
bootstrap框架中也給組合列表項(xiàng)提供了狀態(tài)效果，特別是鏈接列表組，實(shí)現(xiàn)方法和前面介紹的組件類似，在列表組中只需在對(duì)應(yīng)的列表項(xiàng)中添加類名：.active(表示當(dāng)前狀態(tài))、.disabled（表示禁用狀態(tài)）
實(shí)現(xiàn)原理：
在樣式上主要對(duì)列表項(xiàng)的背景色和文本做了樣式設(shè)置，下面是css源碼：
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
color: #777;
background-color: #eee;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}例子：
<h2>列表組狀態(tài)設(shè)置</h2> <ul class="list-group"> <a class="list-group-item active"> <h5 class="list-group-item-heading">列表1標(biāo)題</h5> <p class="list-group-item-text">列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容列表1內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表2標(biāo)題</h5> <p class="list-group-item-text">列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容列表2內(nèi)容</p> </a> <a class="list-group-item disabled"> <h5 class="list-group-item-heading">列表3標(biāo)題</h5> <p class="list-group-item-text">列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容列表3內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表4標(biāo)題</h5> <p class="list-group-item-text">列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容列表4內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表5標(biāo)題</h5> <p class="list-group-item-text">列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容列表5內(nèi)容</p> </a> <a class="list-group-item"> <h5 class="list-group-item-heading">列表6標(biāo)題</h5> <p class="list-group-item-text">列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容列表6內(nèi)容</p> </a> </ul>
效果如下（第三個(gè)列表項(xiàng)是禁用狀態(tài)，鼠標(biāo)移放在它上面有個(gè)禁用圖標(biāo)，這里是直接截的圖，看不到這個(gè)效果）：
列表組組件和警告組件一樣，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ò)誤 紅色（背景色）
實(shí)現(xiàn)原理：
這幾個(gè)類名僅修改了背景色和文本色，對(duì)應(yīng)的源碼如下：
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}其它狀態(tài)樣式代碼請(qǐng)查看源碼文件,如果想給列表項(xiàng)添加背景色，只需在類.lis-group-item的基礎(chǔ)上追加對(duì)應(yīng)的類名即可。
多彩列表組的運(yùn)用：
<h2>多彩列表組</h2> <ul class="list-group"> <a href="#" class="list-group-item active"> 列表項(xiàng)1 <span class="badge">10</span> </a> <a href="#" class="list-group-item list-group-item-success"> 列表項(xiàng)1 <span class="badge">10</span> </a> <a href="#" class="list-group-item list-group-item-info"> 列表項(xiàng)1 <span class="badge">10</span> </a> <a href="#" class="list-group-item list-group-item-warning"> 列表項(xiàng)1 <span class="badge">10</span> </a> <a href="#" class="list-group-item list-group-item-danger"> 列表項(xiàng)1 <span class="badge">10</span> </a> </ul>
效果如下：
看完了這篇文章，相信你對(duì)“Bootstrap中列表組組件的使用示例”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼