Bootstrap .list-group

基本列表组

最基本的列表组是一个包含列表项的无序列表：

第一项
第二项
第三项

要创建基本列表组，请使用<ul>具有类的元素.list-group，和<li>具有类的元素.list-group-item:

示例

<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

亲自试一试 »

列出带有徽章的组

您还可以将徽章添加到列表组。徽章将自动放置在右侧：

12新的
5已删除
3警告

要创建徽章，请创建<span>具有类的元素.badge列表项内：

示例

<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

亲自试一试 »

列出具有链接项目的组

列表组中的项目也可以是超链接。这将在悬停时添加灰色背景颜色：

第一项第二项第三项

要创建包含链接项目的列表组，请使用<div>代替<ul>和<a>代替<li>:

示例

<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

亲自试一试 »

活动状态

第一项第二项第三项

使用.active类来突出显示当前项目：

示例

<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

亲自试一试 »

禁用项目

以下列表组有一个禁用的项目：

第一项第二项第三项

要禁用某个项目，请添加.disabled类：

示例

<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

亲自试一试 »

情境类

上下文类可用于为列表项着色：

第一项
第二项
第三项
第四项

为列表项着色的类是： .list-group-item-success,list-group-item-info, list-group-item-warning，和.list-group-item-danger:

示例

<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

亲自试一试 »

定制内容

您可以在列表组项目中添加几乎任何 HTML。

Bootstrap提供了类.list-group-item-heading和.list-group-item-text可以如下使用：

示例

<div class="list-group">
<a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
</a>
</div>

亲自试一试 »