Bootstrap教程(22)--清單組

1. 概述

清單組用來顯示一組關聯的顯示元素，Bootstrap提供了可以靈活使用的清單組元件list-group，本篇就來具體示範下。

2. 普通清單組

用

list-group

類修飾ul元素，使用

list-group-item

類修飾li元素，即可建立清單組，代碼如下：

普通清單組：
                <ul class="list-group">
                    <li class="list-group-item">第1節</li>
                    <li class="list-group-item">第2節</li>
                    <li class="list-group-item">第3節</li>
                    <li class="list-group-item">第4節</li>
                </ul>
      

3. 将普通連結轉換為清單組

不僅可以針對ul、li組合應用清單組樣式類，還可以對普通的div、a元素使用。

   連結轉換為清單組：

               <div class="list-group">

                   <a class="list-group-item">第1節</a>

                   <a class="list-group-item">第2節</a>

                   <a class="list-group-item">第3節</a>

                   <a class="list-group-item">第4節</a>

               </div>

4. 調整清單項的樣式

可以針對清單項應用一些樣式，例如active表示選中樣式，disabled表示禁用，還有一些常見的其他樣式：

   調整清單項樣式

               <ul class="list-group">

                   <li class="list-group-item active">active</li>

                   <li class="list-group-item disabled">disabled</li>

                   <li class="list-group-item list-group-item-info">list-group-item-info</li>

                   <li class="list-group-item list-group-item-success">list-group-item-success</li>

                   <li class="list-group-item list-group-item-warning">list-group-item-warning</li>

                   <li class="list-group-item list-group-item-danger">list-group-item-danger</li>

               </ul>

效果如下：

5. 帶徽章的清單組

可以在清單項中添加徽章，有趣的是，徽章會自動的排列到清單組的右側，如下：

   帶徽章清單組

                   <li class="list-group-item">收件箱<span class="badge">5</span></li>

                   <li class="list-group-item">發件箱<span class="badge">5</span></li>

                   <li class="list-group-item">草稿箱<span class="badge">5</span></li>

                   <li class="list-group-item">資源回收筒<span class="badge">5</span></li>

6. 添加标題和内容

清單項可以擺脫固定的文字内容，通過

list-item-item-heading

可以為清單項添加标題部分，然後通過

list-group-item-text

可以為清單項添加内容部分。

添加标題和内容
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">張三</div>
                        <div class="list-group-item-text">一個英俊的小夥子</div>
                    </li>
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">李四</div>
                        <div class="list-group-item-text">一個優秀的小夥子</div>
                    </li>
                    <li class="list-group-item">
                        <div class="list-group-item-heading h4">趙五</div>
                        <div class="list-group-item-text">一個有前途的的小夥子</div>
                    </li>
                </ul>
      

7. 小結

清單組其實并不算特别常用，但是如果有合适的場景，例如郵箱的導航，直接使用清單組無疑更加省心。