怎样创建一个最简单的列表组？

使用 <ul> 设置 .list-group 类，其中 <li> 设置 .list-group-itme 类，即可列表组。

<ul class="list-group">
    <li class="list-group-item">Pictures</li>
    ......
</ul>

01.PNG

怎样给列表项设置链接，并呈现出激活状态？

使用 <div> 代替 <ul> 作为列表组
使用 <a> 代替 <li> 作为列表项
激活项可以设置 .active 类

<!-- 带链接的列表组 -->
<div class="bs-example">
    <div class="list-group">
        <a href="#" class="list-group-item active">Pictures</a>
        <a href="#" class="list-group-item">Documents</a>
        ......
    </div>
</div>

给列表项设置链接，并激活

怎样给列表项设置图标？

列表项文本的前面或者后面添加一个 <span> 元素，设置图标类

<!-- 带链接、带图标的列表组 -->
<div class="bs-example">
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <span class="glyphicon glyphicon-camera"></span> Pictures
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-file"></span> Documents
        </a>
        ...........
    </div>
</div>

设置图标

怎样给列表项设置徽章？

列表项的文本前面或者后面添加一个 <span> 元素，并设置 .badge 类

<div class="list-group">
    <a href="#" class="list-group-item active">
        <span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
    </a>
    ......
</div>

设置徽章

自定义列表组包含哪些组件？

在 .list-group-item 内可以添加任何 HTML 内容，通常情况下包含

标题： <h1> 设置 .list-group-item-heading
内容： <p> 设置 .list-group-item-text

<div class="list-group">

    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">What is HTML?</h4>
        <p class="list-group-item-text">HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</p>
    </a>

    <a href="#" class="list-group-item active">
        .......
    </a>

    ......
</div>

03.PNG

怎样为列表组设置情景样式？

为每个列表项也可以设置上下文样式，例如 .list-group-item-success

<div class="bs-example">
    <h2>没有活动的列表项</h2>
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">200 OK: The server successfully processed the request.</li>
        ......
    </ul>
</div>


<div class="bs-example">
    <h2>有活动的列表项</h2>
    <div class="list-group">
        ......
        <a href="#" class="list-group-item list-group-item-info active">100 Continue: The client should continue with its request.</a>
        ......
    </div>
</div>

04.PNG

列表组 - List Groups