Bootstrap 4 列表组

基础列表组

大部分基础列表组都是无序的:

  • 第一项
  • 第二项
  • 第三项

要创建列表组,可以在 <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>
亲自试一试 »

激活状态的列表项

  • Active item
  • Second item
  • Third item

使用 .active 类来设置激活状态的列表项:

实例

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
亲自试一试 »

禁用的列表项

.disabled 类用于设置禁用的列表项,禁用的项添加较浅的文本颜色。在链接上使用时,它将消除悬停效果:

实例

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
亲自试一试 »


链接列表项

要创建一个链接的列表项,可以将 <ul> 替换为 <div><a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加 .list-group-item-action 类:

实例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">第一项</a>
  <a href="#" class="list-group-item list-group-item-action">第二项</a>
  <a href="#" class="list-group-item list-group-item-action">第三项</a>
</div>
亲自试一试 »

移除列表边框

使用 .list-group-flush 类来删除列表的边框和圆角:

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

实例

<ul class="list-group list-group-flush">
  <li class="list-group-item">第一项</li>
  <li class="list-group-item">第二项</li>
  <li class="list-group-item">第三项</li>
  <li class="list-group-item">第四项</li>
</ul>
亲自试一试 »

水平列表组

我们可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组:

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

实例

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">第一项</li>
  <li class="list-group-item">第二项</li>
  <li class="list-group-item">第三项</li>
  <li class="list-group-item">第四项</li>
</ul>
亲自试一试 »

多种颜色列表项

上下文类可用于向列表项添加颜色:

  • 成功项
  • 次要项目
  • 信息项
  • 警告项
  • 危险物品
  • 主要项目
  • 暗项
  • 亮项

列表项目的颜色可以通过以下类来设置: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-darklist-group-item-light,:

实例

<ul class="list-group">
  <li class="list-group-item list-group-item-success">成功项</li>
  <li class="list-group-item list-group-item-secondary">次要项目</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>
  <li class="list-group-item list-group-item-primary">主要项目</li>
  <li class="list-group-item list-group-item-dark">暗色项目</li>
  <li class="list-group-item list-group-item-light">浅色项目</li>
</ul>
亲自试一试 »

链接的多种颜色列表项

实例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">操作项</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">成功项</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">次要项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">信息项</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">警告项</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">危险项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">主要项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">暗色项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">浅色项目</a>
</div>
亲自试一试 »

带有徽章的列表组

.badge 类与 utility/helper 类结合起来,在列表组中添加徽章:

列出带有徽章的组

.badge 类与实用程序/帮助程序类结合起来,在列表组内添加徽章:

  • Inbox 12
  • Ads 50
  • Junk 99

实例

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>
亲自试一试 »

提示: 在我们的 BS4 实用程序章节中阅读有关 Bootstrap 4 Utility/Helper 类的更多信息。