真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Bootstrap中列表組組件的使用示例

小編給大家分享一下Bootstrap中列表組組件的使用示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商，涵蓋公有云、IDC機(jī)房租用、內(nèi)江服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級(jí)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，歡迎聯(lián)系：13518219792

列表組可以用來(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è)例子：

基礎(chǔ)列表組

    
        臘肉土豆?fàn)F飯
        香辣風(fēng)味炸雞塊
        香菜皮蛋豆腐
        荷蘭豆炒馬蹄
        山楂排骨
        韭菜炒河蝦
    

Bootstrap中列表組組件的使用示例

帶徽章的列表組

帶徽章的列表組其實(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;
}

例子：

帶徽章的列表組

    
        
            13
            臘肉土豆?fàn)F飯
        
        
            20
            香辣風(fēng)味炸雞塊
        
        
            12
            香菜皮蛋豆腐
        
        
            5
            荷蘭豆炒馬蹄
        
        
            8
            山楂排骨
        
        
            15
            韭菜炒河蝦
        
    

Bootstrap中列表組組件的使用示例

帶鏈接的列表組

帶連接的列表組其實(shí)就是每個(gè)列表項(xiàng)都具有鏈接效果，一般讓人想到的就是在基礎(chǔ)列表組的基礎(chǔ)上，給列表項(xiàng)的文本添加鏈接，如：


        臘肉土豆?fàn)F飯
        香辣風(fēng)味炸雞塊
        香菜皮蛋豆腐
        荷蘭豆炒馬蹄
        山楂排骨
        韭菜炒河蝦

效果如下：

Bootstrap中列表組組件的使用示例

這樣做有個(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)用：

帶鏈接的列表組

    
        臘肉土豆?fàn)F飯
        香辣風(fēng)味炸雞塊
        香菜皮蛋豆腐
        荷蘭豆炒馬蹄
        山楂排骨
        韭菜炒河蝦
    

效果如下：

Bootstrap中列表組組件的使用示例

自定義列表組

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)用

自定義列表組

    
        
           列表1標(biāo)題
           列表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)容

        
        
            列表2標(biāo)題
            列表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)容

        
        
            列表3標(biāo)題
            列表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)容

        
        
            列表4標(biāo)題
            列表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)容

        
        
            列表5標(biāo)題
            列表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)容

        
        
            列表6標(biāo)題
            列表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)容

        
    

Bootstrap中列表組組件的使用示例

列表項(xiàng)的狀態(tài)設(shè)置

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;
}

例子：

列表組狀態(tài)設(shè)置

    
        
            列表1標(biāo)題
            列表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)容

        
        
            列表2標(biāo)題
            列表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)容

        
        
            列表3標(biāo)題
            列表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)容

        
        
            列表4標(biāo)題
            列表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)容

        
        
            列表5標(biāo)題
            列表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)容

        
        
            列表6標(biāo)題
            列表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)容

        
    

效果如下（第三個(gè)列表項(xiàng)是禁用狀態(tài)，鼠標(biāo)移放在它上面有個(gè)禁用圖標(biāo)，這里是直接截的圖，看不到這個(gè)效果）：

Bootstrap中列表組組件的使用示例

多彩列表組

列表組組件和警告組件一樣，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)用：

多彩列表組

    
        
            列表項(xiàng)1
            10
        
        
            列表項(xiàng)1
            10
        
        
            列表項(xiàng)1
            10
        
        
            列表項(xiàng)1
            10
        
        
            列表項(xiàng)1
            10
        
    

效果如下：

Bootstrap中列表組組件的使用示例

看完了這篇文章，相信你對(duì)“Bootstrap中列表組組件的使用示例”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！


新聞名稱：Bootstrap中列表組組件的使用示例
地址分享：http://weahome.cn/article/jpocpp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部