Bootstrap4 列表组

列表组组件的重要性

列表组是Bootstrap中用于显示一系列内容的灵活组件：

  • 用于显示简单列表、复杂内容或交互式项目
  • 支持多种样式和状态
  • 可以与其他组件结合使用
  • 提供一致的视觉设计

基本列表组

Bootstrap 4 提供了简单易用的列表组组件，使用 .list-group 和 .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>
  <li class="list-group-item">第四个项目</li>
  <li class="list-group-item">第五个项目</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">第二个链接</a>
  <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>

列表组状态

Bootstrap 4 提供了多种列表组状态，包括激活状态和禁用状态。

列表组状态示例
激活和禁用状态
常规项目 激活项目 禁用项目 另一个常规项目
上下文颜色
  • 默认列表项
  • 主要列表项
  • 次要列表项
  • 成功列表项
  • 危险列表项
  • 警告列表项
  • 信息列表项
  • 浅色列表项
  • 深色列表项
<!-- 激活和禁用状态 -->
<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 active">激活项目</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">禁用项目</a>
  <a href="#" class="list-group-item list-group-item-action">另一个常规项目</a>
</div>

<!-- 上下文颜色 -->
<ul class="list-group">
  <li class="list-group-item">默认列表项</li>
  <li class="list-group-item list-group-item-primary">主要列表项</li>
  <li class="list-group-item list-group-item-secondary">次要列表项</li>
  <li class="list-group-item list-group-item-success">成功列表项</li>
  <li class="list-group-item list-group-item-danger">危险列表项</li>
  <li class="list-group-item list-group-item-warning">警告列表项</li>
  <li class="list-group-item list-group-item-info">信息列表项</li>
  <li class="list-group-item list-group-item-light">浅色列表项</li>
  <li class="list-group-item list-group-item-dark">深色列表项</li>
</ul>

带徽章的列表组

可以在列表项中添加徽章，用于显示计数或其他信息。

带徽章的列表组示例
徽章列表组
  • 收件箱 12
  • 已发送 5
  • 草稿 3
  • 垃圾邮件 27
不同颜色的徽章
  • 待处理任务 5
  • 进行中任务 3
  • 已完成任务 12
  • 已取消任务 2
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    收件箱
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    已发送
    <span class="badge badge-primary badge-pill">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    草稿
    <span class="badge badge-primary badge-pill">3</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    垃圾邮件
    <span class="badge badge-primary badge-pill">27</span>
  </li>
</ul>

自定义内容列表组

列表组可以包含任意HTML内容，而不仅仅是文本。

自定义内容列表组示例
复杂内容列表组
列表组项目标题
3天前

这是列表组项目的内容区域。这里可以放置一些描述性文本。

一些较小的文本。
另一个列表组项目标题
1周前

这是另一个列表组项目的内容区域。这里可以放置一些描述性文本。

一些较小的文本。
第三个列表组项目标题
2周前

这是第三个列表组项目的内容区域。这里可以放置一些描述性文本。

一些较小的文本。
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">列表组项目标题</h5>
      <small>3天前</small>
    </div>
    <p class="mb-1">这是列表组项目的内容区域。这里可以放置一些描述性文本。</p>
    <small>一些较小的文本。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">另一个列表组项目标题</h5>
      <small class="text-muted">1周前</small>
    </div>
    <p class="mb-1">这是另一个列表组项目的内容区域。这里可以放置一些描述性文本。</p>
    <small class="text-muted">一些较小的文本。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">第三个列表组项目标题</h5>
      <small class="text-muted">2周前</small>
    </div>
    <p class="mb-1">这是第三个列表组项目的内容区域。这里可以放置一些描述性文本。</p>
    <small class="text-muted">一些较小的文本。</small>
  </a>
</div>

列表组样式变体

Bootstrap 4 提供了多种列表组样式变体，以适应不同的设计需求。

列表组样式变体示例
无边框列表组
  • 第一个项目
  • 第二个项目
  • 第三个项目
  • 第四个项目
水平列表组
  • 第一个项目
  • 第二个项目
  • 第三个项目
自定义样式列表组
  • 第一个项目
  • 激活项目
  • 第三个项目
  • 第四个项目
<!-- 无边框列表组 -->
<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>

<!-- 水平列表组 -->
<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>
</ul>

<!-- 自定义样式列表组 -->
<style>
.custom-list-group .list-group-item {
  border-left: 4px solid transparent;
  transition: all 0.3s;
}

.custom-list-group .list-group-item:hover {
  border-left-color: #6f42c1;
  background-color: rgba(111, 66, 193, 0.05);
}

.custom-list-group .list-group-item.active {
  border-left-color: #6f42c1;
  background-color: #6f42c1;
}
</style>

<ul class="list-group custom-list-group">
  <li class="list-group-item">第一个项目</li>
  <li class="list-group-item active">激活项目</li>
  <li class="list-group-item">第三个项目</li>
  <li class="list-group-item">第四个项目</li>
</ul>

JavaScript行为

列表组可以与JavaScript结合使用，创建交互式组件。

JavaScript行为示例
标签页列表组
首页内容

这是首页的内容区域。您可以在这里放置任何内容。

个人资料内容

这是个人资料的内容区域。您可以在这里放置任何内容。

消息内容

这是消息的内容区域。您可以在这里放置任何内容。

设置内容

这是设置的内容区域。您可以在这里放置任何内容。

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">首页</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">个人资料</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">消息</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">设置</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <h5>首页内容</h5>
        <p>这是首页的内容区域。您可以在这里放置任何内容。</p>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <h5>个人资料内容</h5>
        <p>这是个人资料的内容区域。您可以在这里放置任何内容。</p>
      </div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
        <h5>消息内容</h5>
        <p>这是消息的内容区域。您可以在这里放置任何内容。</p>
      </div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
        <h5>设置内容</h5>
        <p>这是设置的内容区域。您可以在这里放置任何内容。</p>
      </div>
    </div>
  </div>
</div>

最佳实践

使用列表组组件的建议
  • 保持一致性 - 在整个应用中使用一致的列表组样式
  • 提供清晰的视觉层次 - 使用不同的颜色和状态来区分内容
  • 考虑可访问性 - 使用适当的ARIA属性，确保屏幕阅读器用户可以理解列表结构
  • 响应式设计 - 确保列表组在不同设备上都能良好显示
  • 合理使用交互 - 为可点击的列表项添加适当的悬停和焦点状态

学习完成！

您已经学会了Bootstrap 4中的列表组组件使用方法。现在可以尝试在自己的项目中使用这些技术了。

继续学习下一章：Bootstrap 4 组件

上一章:Bootstrap4 分页 下一章:Bootstrap4 卡片