怎样创建一个最简单的列表组？
使用 <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
