深刻理解BootStrap Item1-- 列表組(list-group)

class=」pull-right」:右對齊下拉菜單
list-group-item：列表組，控制列表，以及添加列表徽章

一、列表組

列表組是Bootstrap框架新增的一個組件，能夠用來製做列表清單、垂直導航等效果，也能夠配合其餘的組件製做出更漂亮的組件。因爲其在Bootstrap是一個獨立的組件，因此也對應有本身獨立源碼：

☑ LESS版本：對應的源碼文件 list-group.less

☑ Sass版本：對應的源碼文件是 _list-group.scss

☑ 編譯出的Bootstrap版本：對應的源碼bootstrap.css文件第4820行～第4994行

二、列表組–基礎列表組

基礎列表組，看上去就是去掉了列表符號的列表項，而且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分：

☑ list-group：列表組容器，經常使用的是ul元素，固然也能夠是ol或者div元素

☑ list-group-item：列表項，經常使用的是li元素，固然也能夠是div元素

來看一個簡單的示例：

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

 運行效果以下：
這裏寫圖片描述

原理分析：

對於基礎列表組並無作過多的樣式設置，主要設置了其間距，邊框和圓角等：

/bootstrap.css文件第4820行～第4840行/

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

 

三、列表組–帶徽章的列表組

帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一塊兒的一個效果。具體作法很簡單，只須要在「list-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>

 運行效果以下：

實現原理：

實現效果很是簡單，就是給徽章設置了一個右浮動，固然若是有兩個徽章同時在一個列表項中出現時，還設置了他們之間的距離：

/bootstrap.css文件第4841行～第4846行/

.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}

 

四、列表組–帶連接的列表組

帶連接的列表組，其實就是每一個列表項都具備連接效果。你們可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加連接：

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

 運行效果以下：

這樣作有一個不足之處，就是連接的點擊區域只在文本上有效.

但不少時候，都但願在列表項的任何區域都具有可點擊。這個時候就須要在連接標籤上增長額外的樣式：「display:block」；

雖然這樣能解決問題，達到需求。但在Bootstrap框架中，仍是採用了另外一種實現方式。就是將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就能夠達到須要的效果：

<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">玩轉Bootstrap</a>
</div>

 運行效果以下：

原理實現：

若是使用a.list-group-item時，在樣式須要作必定的處理，好比說去文本下劃線，增長懸浮效果等：

/bootstrap.css文件第4847行～第4858行/

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

 

五、列表組–自定義列表組

Bootstrap框加在連接列表組的基礎上新增了兩個樣式：

☑ list-group-item-heading：用來定義列表項頭部樣式

☑ list-group-item-text：用來定義列表項主要內容

 這兩個樣式最大的做用就是用來幫助開發者能夠自定義列表項裏的內容，以下面的示例：

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

 運行效果以下：

原理實現：

這兩個樣式主要控制不一樣狀態下的文本顏色：

/bootstrap.css文件第4850行～第4852行/

a.list-group-item .list-group-item-heading {
  color: #333;
}
/*bootstrap文件第4865行～第4874行*/
.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;
}

 /bootstrap.css文件第4883行～第4898行/

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

 /bootstrap.css文件第4987行～第4994行/

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

 

六、列表組–列表項的狀態設置

Bootstrap框架也給組合列表項提供了狀態效果，特別是連接列表組。好比常見狀態和禁用狀態等。實現方法和前面介紹的組件相似，在列表組中只須要在對應的列表項中添加類名：

☑ active：表示當前狀態

☑ disabled：表示禁用狀態

 來看個示例：

原理實現：

在樣式上主要對列表項的背景色和文本作了樣式設置：

/bootstrap.css文件第4859行～第4864行/

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}

 /bootstrap.css文件第4875行～第4882行/

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

 

七、列表組–多彩列表組

列表組組件和警告組件同樣，Bootstrap爲不一樣的狀態提供了不一樣的背景顏色和文本色，可使用這幾個類名定義不一樣背景色的列表項。

☑ list-group-item-success：成功，背景色綠色

☑ list-group-item-info：信息，背景色藍色

☑ list-group-item-warning：警告，背景色爲黃色

☑ list-group-item-danger：錯誤，背景色爲紅色

 若是你想給列表項添加什麼背景色，只須要在「list-group-item」基礎上增長對應的類名：

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

 運行效果以下：

 

原理實現：

一樣的，這幾個類名僅修改了背景色和文本色，對應的源碼爲：boostrap.css文件第4899行～第4986行：

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