Bootstrap5 列表组学习笔记

Bootstrap5 提供了很多实用的组件，其中包括列表组（List Group）。列表组可以用于展示一系列相关的数据或链接，具有良好的排版效果和交互体验。本文将详细介绍 Bootstrap5 列表组的使用方法以及常用选项和实例。

列表组样式及基本用法

Bootstrap5 提供了多种列表组样式，可以通过添加 class 来实现。以下是常用列表组样式及其 class：

• 基本样式：list-group
• 链接样式：list-group list-group-flush
• 水平排列样式：list-group-horizontal
• 活动状态：active
• 禁用状态：disabled

列表组的基本用法非常简单，只需在 ul 标签中添加 list-group class 即可，如下所示：

htmlCopy Code
<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>

通过添加不同的 class，可以实现其他样式的列表组。例如，以下代码实现了水平排列的链接列表组：

htmlCopy Code
<div class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">链接1</a>
  <a href="#" class="list-group-item list-group-item-action">链接2</a>
  <a href="#" class="list-group-item list-group-item-action">链接3</a>
</div>

列表组的高级用法

除了基本用法外，Bootstrap5 还提供了一些高级用法和选项，可以进一步优化列表组的显示效果和交互体验。

列表组嵌套

Bootstrap5 支持在列表组中嵌套其他列表组。以下是一个嵌套列表组的示例：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">一级列表项 1
    <ul class="list-group list-group-flush">
      <li class="list-group-item">二级列表项 1</li>
      <li class="list-group-item">二级列表项 2</li>
      <li class="list-group-item">二级列表项 3</li>
    </ul>
  </li>
  <li class="list-group-item">一级列表项 2</li>
  <li class="list-group-item">一级列表项 3</li>
</ul>

列表组激活状态

列表组的激活状态可以通过 active class 实现。以下是一个设置了激活状态的列表组示例：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">激活列表项</li>
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item">列表项 2</li>
</ul>

列表组禁用状态

列表组的禁用状态可以通过 disabled class 实现。以下是一个设置了禁用状态的列表组示例：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item disabled" tabindex="-1" aria-disabled="true">禁用列表项</li>
  <li class="list-group-item">列表项 2</li>
</ul>

列表组事件绑定

Bootstrap5 列表组支持多种事件，可以通过 JavaScript 绑定。以下是一个绑定了点击事件的列表组示例：

htmlCopy Code
<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>

<script>
  var listItems = document.querySelectorAll(".list-group-item");
  for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener("click", function() {
      alert("你点击了列表项：" + this.textContent);
    });
  }
</script>

列表组实例

以下是一些常见的列表组实例，供参考：

常规列表组

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">Apple</li>
  <li class="list-group-item">Banana</li>
  <li class="list-group-item">Cherry</li>
  <li class="list-group-item">Durian</li>
</ul>

链接列表组

htmlCopy Code
<div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action">Home</a>
  <a href="#" class="list-group-item list-group-item-action">About</a>
  <a href="#" class="list-group-item list-group-item-action">Contact</a>
</div>

水平排列的链接列表组

htmlCopy Code
<div class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">Link 1</a>
  <a href="#" class="list-group-item list-group-item-action">Link 2</a>
  <a href="#" class="list-group-item list-group-item-action">Link 3</a>
</div>

嵌套列表组

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">一级列表项 1
    <ul class="list-group list-group-flush">
      <li class="list-group-item">二级列表项 1</li>
      <li class="list-group-item">二级列表项 2</li>
      <li class="list-group-item">二级列表项 3</li>
    </ul>
  </li>
  <li class="list-group-item">一级列表项 2</li>
  <li class="list-group-item">一级列表项 3</li>
</ul>