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 »