列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容

基本实例

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制

xxxxxxxxxx
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

徽章

给列表组加入徽章组件，它会自动被放在右边

xxxxxxxxxx
<ul class="list-group">
    <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
    <li class="list-group-item"><span class="badge">20</span>Cras justo odio</li>
    <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
</ul>

链接

用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素

xxxxxxxxxx
<div class="list-group">
    <a href="#" class="list-group-item active">Cras justo odio</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

按钮

列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。

温馨提示

注意不要使用标准的 .btn 类！

xxxxxxxxxx
<div class="list-group">
    <button type="button" class="list-group-item">Cras justo odio</button>
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item">Morbi leo risus</button>
    <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

被禁用的条目

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

xxxxxxxxxx
<div class="list-group">
    <a href="#" class="list-group-item disabled">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

情境类

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态

xxxxxxxxxx
<ul class="list-group">
    <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
    <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
    <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
    <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

定制内容

列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组

xxxxxxxxxx
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">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">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">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

实时效果反馈

1. 下列那个类，可以实现列表组效果：

A .media

B .list-group

C .progress

D .alert

答案

1=>B