Bootstrap學習之列表組元件的用法

本篇文章帶大家了解一下Bootstrap中列表組元件的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《bootstrap教學》

清單群組可以用來製作清單清單、垂直導航等效果，也可以配合其他的元件製作出更漂亮的元件，列表組在bootstrap框架中也是一個獨立的元件，所以也對應有自己獨立原始碼：

• LESS：list-group.less

• SASS:_list-group.scss

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

• list-group:列表組容器，常用的是ul元素，也可以是ol或p元素

• list-group-item:列表項，常用的是li元素，也可以是p元素

對於基礎清單群組並沒有做過多的樣式設置，主要設定了其間距、邊框和圓角等；

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

來看一個例子：

<h1>基础列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">腊肉土豆焖饭</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>
        <li class="list-group-item">韭菜炒河虾</li>
    </ul>

##帶徽章的列表組

帶徽章的列表組其實就是將bootstrap框架中的徽章組件和基礎列表組件結合在一起的一個效果，具體做法很簡單，只需在.list-group -item的基礎上追加徽章元件「badge」

實作原理：

給徽章設定了一個右浮動，當然如果兩個徽章同時在一個清單項中出現時，也設定了它們之間的距離

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

範例：

<h1>带徽章的列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">13</span>
            腊肉土豆焖饭
        </li>
        <li class="list-group-item">
            <span class="badge">20</span>
            香辣风味炸鸡块
        </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>

帶連結的清單群組

帶連接的列表組其實就是每個列表項都具有鏈接效果，一般讓人想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接，如：

<ul class="list-group">
        <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>
        <li class="list-group-item"><a href="#">山楂排骨</a></li>
        <li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>

效果如下：

這樣做有個不足之處，就是連結的點擊區域只在文字上有效；但很多時候都希望在清單項目的任何區域都具備可點擊，這是就需要在連結標籤上增加額外的樣式：display：block；但在bootstrap框架中，還是採用了另一種實現方式，就是將ul.list-group用p.list-group來替換，li.list-group-item用a.list-group-item來替換，這樣就可以達到需要的效果。

實作原理：

如果使用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;
}

帶連結列表群組的運用：

<h1>带链接的列表组</h1>
    <ul class="list-group">
        <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>
        <a class="list-group-item" href="#">山楂排骨</a>
        <a class="list-group-item" href="#">韭菜炒河虾</a>
    </ul>

效果如下：

自訂列表群組

bootstrap框架在連結清單群組的基礎上增加了兩個樣式：

.list-group-item-heading:用來定義清單項目頭部樣式

.list-group-item-text:用來定義清單項目主要內容

這兩個樣式最大的作用就是用來幫組開發者可以自訂清單項目裡的內容

實作原則：

這兩個樣式主要控制不容狀態下的文字顏色，以下是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;
}

自訂清單群組的運用

<h1>自定义列表组</h1>
    <ul class="list-group">
        <a class="list-group-item">
           <h4 class="list-group-item-heading">列表1标题</h4>
           <p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表2标题</h4>
            <p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表3标题</h4>
            <p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表4标题</h4>
            <p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表5标题</h4>
            <p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表6标题</h4>
            <p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
        </a>
    </ul>

#

列表项的状态设置

bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现方法和前面介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表示当前状态)、.disabled（表示禁用状态）

实现原理：

在样式上主要对列表项的背景色和文本做了样式设置，下面是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;
}

例子：

<h1>列表组状态设置</h1>
    <ul class="list-group">
        <a class="list-group-item active">
            <h4 class="list-group-item-heading">列表1标题</h4>
            <p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表2标题</h4>
            <p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
        </a>
        <a class="list-group-item disabled">
            <h4 class="list-group-item-heading">列表3标题</h4>
            <p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表4标题</h4>
            <p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表5标题</h4>
            <p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表6标题</h4>
            <p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
        </a>
    </ul>

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

多彩列表组

列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：

.list-group-item-success:成功 绿色（背景色）

.list-group-item-info:信息 蓝色（背景色）

.list-group-item-warning:警告 黄色（背景色）

.list-group-item-danger:错误 红色（背景色）

实现原理：

这几个类名仅修改了背景色和文本色，对应的源码如下：

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

其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。

多彩列表组的运用：

<h1>多彩列表组</h1>
    <ul class="list-group">
        <a href="#" class="list-group-item active">
            列表项1
            <span class="badge">10</span>
        </a>
        <a href="#" class="list-group-item list-group-item-success">
            列表项1
            <span class="badge">10</span>
        </a>
        <a href="#" class="list-group-item list-group-item-info">
            列表项1
            <span class="badge">10</span>
        </a>
        <a href="#" class="list-group-item list-group-item-warning">
            列表项1
            <span class="badge">10</span>
        </a>
        <a href="#" class="list-group-item list-group-item-danger">
            列表项1
            <span class="badge">10</span>
        </a>
    </ul>

效果如下：

更多编程相关知识，请访问：编程教学！！

以上是Bootstrap學習之列表組元件的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！