這篇文章主要介紹了Bootstrap中列表組的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是專業(yè)的雙臺(tái)子網(wǎng)站建設(shè)公司，雙臺(tái)子接單;提供成都做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行雙臺(tái)子網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

列表組是Bootstrap框架新增的一個(gè)組件，可以用來(lái)制作列表清單、垂直導(dǎo)航等效果，也可以配合其他的組件制作出更漂亮的組件。【相關(guān)推薦：redis視頻教程】

基礎(chǔ)列表組

基礎(chǔ)列表組，看上去就是去掉了列表符號(hào)的列表項(xiàng)，并且配上一些特定的樣式。在Bootstrap框架中的基礎(chǔ)列表組主要包括兩個(gè)部分：

?  list-group：列表組容器，常用的是ul元素，當(dāng)然也可以是ol或者p元素

?  list-group-item：列表項(xiàng)，常用的是li元素，當(dāng)然也可以是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;
}

    HTML
    CSS
    javascript
    bootstrap
    jquery

徽章

帶徽章的列表組其實(shí)就是將Bootstrap框架中的徽章組件和基礎(chǔ)列表組結(jié)合在一起的一個(gè)效果。具體做法很簡(jiǎn)單，只需要在“l(fā)ist-group-item”中添加徽章組件“badge”

原理非常簡(jiǎ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;
}

    
        33HTML
    
    
        60CSS
    
    
        192javascript
    
    
        20bootstrap
    
    
        26jquery
    

鏈接

用 標(biāo)簽代替