Bootstrap 组件之 List group

简介

List group 指列表。当然，Bootstrap 列表不局限于由

<ul>

和

<li>

标签构成的。

Bootstrap 中一共三种列表的构成方式，这里 有一个例子：

ul > li

。

div > a

。

div > button

。

列表就是“父与子”的关系。在 Bootstrap 中，“父”要标记上

list-group

，“子”要标记上

list-group-item

。

ul > li

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

稍复杂些的：

<ul class="list-group">
<li class="list-group-item active"><span class="badge">14</span>1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
</ul>

div > a

<ul class="list-group">
<a href="javascript:void(0);" class="list-group-item">1</a>
<a href="javascript:void(0);" class="list-group-item active"><span class="badge">14</span>2</a>
<a href="javascript:void(0);" class="list-group-item">3</a>
</ul>

div > button

<ul class="list-group">
<button type="button" class="list-group-item">1</button>
<button type="button" class="list-group-item">2</button>
<button type="button" class="list-group-item active"><span class="badge">14</span>3</button>
</ul>

（完）