Bootstrap 组件：列表组组件（list-group）

作者:WangMin
格言:努力做好自己喜欢的每一件事

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。

列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分：

默认样式

对于基础列表组并没有做过多的样式设置，主要设置了其间距、边框和圆角。用法如下：

<ul class="list-group">
    <li class="list-group-item">item 1</li>
    <li class="list-group-item">item 2</li>
    <li class="list-group-item">item 3</li>
    <li class="list-group-item">item 4</li>
    <li class="list-group-item">item 5</li>
</ul>

带徽章的列表组

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，只需在.list-group-item的基础上追加徽章组件“badge”，它会自动被放在右边。用法如下：

<ul class="list-group">
    <li class="list-group-item">item 1<span class="badge">2</span></li>
    <li class="list-group-item">item 2<span class="badge">4</span></li>
    <li class="list-group-item">item 3<span class="badge">6</span></li>
    <li class="list-group-item">item 4<span class="badge">8</span></li>
    <li class="list-group-item">item 5<span class="badge">10</span></li>
</ul>

带链接的列表组

带连接的列表组其实就是每个列表项都具有链接效果，一般让人想到的就是在基础列表组的基础上，给列表项的文本添加链接。用法如下：

<ul class="list-group">
    <li class="list-group-item"><a href="##">item 1</a></li>
    <li class="list-group-item"><a href="##">item 2</a></li>
    <li class="list-group-item"><a href="##">item 3</a></li>
    <li class="list-group-item"><a href="##">item 4</a></li>
    <li class="list-group-item"><a href="##">item 5</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 class="list-group-item active">item 1</a>
    <a class="list-group-item">item 2</a>
    <a class="list-group-item">item 3</a>
    <a class="list-group-item">item 4</a>
    <a class="list-group-item">item 5</a>
</div>

按钮

列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是<div>而不能用<ul>了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的.btn类！
其用法如下：

<div class="list-group">
    <button type="button" class="list-group-item">item 1</button>
    <button type="button" class="list-group-item">item 2</button>
    <button type="button" class="list-group-item">item 3</button>
    <button type="button" class="list-group-item">item 4</button>
    <button type="button" class="list-group-item">item 5</button>
</div>

它的效果和默认样式的效果一致，只不过多了一个移入有切换按钮背景色的效果。

被禁用的条目

为.list-group-item添加.disabled类可以让单个条目显示为灰色，表现出被禁用的效果。

<div class="list-group">
    <a class="list-group-item disabled">item 1</a>
    <a class="list-group-item">item 2</a>
    <a class="list-group-item">item 3</a>
    <a class="list-group-item">item 4</a>
    <a class="list-group-item">item 5</a>
</div>

情境类

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

<div class="list-group">
    <a class="list-group-item list-group-item-success">item 1</a>
    <a class="list-group-item list-group-item-danger">item 2</a>
    <a class="list-group-item list-group-item-warning">item 3</a>
    <a class="list-group-item list-group-item-info">item 4</a>
</div>

定制内容

列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。bootstrap框架在链接列表组的基础上增加了两个样式：

这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容。

<div class="list-group">
    <a href="##" class="list-group-item active">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">自定义标题</h4>
        <p class="list-group-item-text">自定义内容</p>
    </a>
</div>

就先分享到这里!! :smile: 后续继续更新!!