Bootstrap5 列表组

以下是关于 Bootstrap 5 列表组（List Group） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 List Group 的使用。

Bootstrap 5 列表组（List Group）指南

什么是 List Group

List Group 是 Bootstrap 5 提供的一种轻量级组件，用于展示一组列表项。它支持简单的文本列表、可点击的链接列表以及自定义内容，常用于侧边导航、任务列表或数据展示。

出站链接：查看 Bootstrap 5 List Group 官方文档。

基本使用

HTML 结构

List Group 使用 .list-group 类定义，列表项使用 .list-group-item。

基本示例

以下是一个简单的列表组示例：

<ul class="list-group">
  <li class="list-group-item">项目 1</li>
  <li class="list-group-item">项目 2</li>
  <li class="list-group-item">项目 3</li>
</ul>

.list-group：列表组容器。
.list-group-item：单个列表项。

也可以使用 <div> 代替 <ul>：

<div class="list-group">
  <div class="list-group-item">项目 1</div>
  <div class="list-group-item">项目 2</div>
</div>

高级用法

带链接

列表项可以设置为可点击的链接，使用 <a> 或 <button>。

示例代码：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">活动项目</a>
  <a href="#" class="list-group-item list-group-item-action">项目 1</a>
  <a href="#" class="list-group-item list-group-item-action">项目 2</a>
</div>

.list-group-item-action：添加悬停和点击效果。
.active：高亮当前项。

自定义内容

支持在列表项中添加标题、描述等复杂内容。

示例代码：

<div class="list-group">
  <div class="list-group-item">
    <h5 class="mb-1">标题</h5>
    <p class="mb-1">这里是项目的详细描述。</p>
    <small class="text-muted">3 天前</small>
  </div>
  <div class="list-group-item">
    <h5 class="mb-1">另一标题</h5>
    <p class="mb-1">另一段描述。</p>
  </div>
</div>

自定义样式

通过 Bootstrap 的颜色类或 CSS 调整外观。

示例代码：

<div class="list-group">
  <div class="list-group-item list-group-item-primary">主要项目</div>
  <div class="list-group-item list-group-item-success">成功项目</div>
  <div class="list-group-item list-group-item-danger">危险项目</div>
</div>
<style>
  .custom-list .list-group-item {
    border: 2px solid #007bff;
    border-radius: 8px;
  }
</style>
<div class="list-group custom-list">
  <div class="list-group-item">自定义项目</div>
</div>

.list-group-item-*：应用背景颜色（如 primary、success）。

水平列表

通过 .list-group-horizontal 实现水平排列。

示例代码：

<div class="list-group list-group-horizontal">
  <div class="list-group-item">项目 1</div>
  <div class="list-group-item">项目 2</div>
  <div class="list-group-item">项目 3</div>
</div>

支持响应式变体，如 .list-group-horizontal-md（中屏及以上水平排列）。

与选项卡集成

List Group 可以与 Tabs 结合，实现侧边导航效果。

示例代码：

<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-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">首页</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">简介</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">首页内容...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">简介内容...</div>
    </div>
  </div>
</div>

出站链接：参考 Bootstrap 5 Tabs。

JavaScript 控制

通过 JavaScript 动态操作列表项（通常与 Tabs 结合）。

示例代码：

const tab = new bootstrap.Tab(document.getElementById('list-profile-list'));
tab.show(); // 切换到简介选项卡

注意事项

依赖性：基础 List Group 不需 JavaScript，但与 Tabs 集成时需要 bootstrap.bundle.min.js。
可访问性：确保使用 ARIA 属性（如 role 和 aria-controls）。
内容长度：过长内容可能导致布局溢出，建议控制宽度。
样式冲突：自定义样式时注意优先级，避免覆盖 Bootstrap 默认样式。

参考资料

以下是与 Bootstrap 5 List Group 相关的外部资源：

总结

Bootstrap 5 的 List Group 是一个多功能的列表组件，支持链接、自定义内容和水平布局。通过与 Tabs 集成，您可以创建动态导航效果。如果您有具体问题或场景，请随时告诉我！