Bootstrap 列表组
基础列表组
大部分基础列表组都是无序的:
- 第一项
- 第二项
- 第三项
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在
<li> 元素上添加 .list-group-item 类:
实例
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
亲自试一试 »
带有徽章的列表组
您还可以向列表组添加徽章。徽章将自动放置在右侧:
- 12 New
- 5 Deleted
- 3 Warnings
要创建徽章，请在列表项中创建一个类别为 .badge 的 <span> 元素:
实例
<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>
亲自试一试 »
链接列表项
列表组中的项目也可以是超链接。这将在悬停时添加灰色背景色:
要创建一个链接的列表项，可以将 <ul> 替换为 <div>，<a> 替换 <li>:
实例
<div class="list-group">
<a href="#" class="list-group-item">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
亲自试一试 »
激活状态的列表项
使用 .active 类来设置激活状态的列表项:
实例
<div class="list-group">
<a href="#" class="list-group-item active">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
亲自试一试 »
禁用的列表项
以下列表组中有一个已禁用的项:
要禁用项目，请添加 .disabled 类:
实例
<div class="list-group">
<a href="#" class="list-group-item disabled">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
亲自试一试 »
多种颜色列表项
上下文类可用于向列表项添加颜色:
- 第一项
- 第二项
- 第三项
- 第四项
列表项目的颜色可以通过以下类来设置:
.list-group-item-success, list-group-item-info,
list-group-item-warning, and .list-group-item-danger:
实例
<ul class="list-group">
<li class="list-group-item list-group-item-success">第一项</li>
<li class="list-group-item list-group-item-info">第二项</li>
<li class="list-group-item list-group-item-warning">第三项</li>
<li class="list-group-item list-group-item-danger">第四项</li>
</ul>
亲自试一试 »
自定义内容
您可以在向列表组添加自定义内容。
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>
亲自试一试 »
实例练习和测验!
练习 1 » 练习 2 » 练习 3 » 练习 4 » 练习 5 »
