Bootstrap 列表组学习笔记

在 Bootstrap 中，列表组可以用于显示一组链接、按钮、图片等相关的内容。列表组也支持动态添加或删除元素。

创建一个基本的列表组

使用 ul 或 ol 元素和 .list-group 类来创建一个基本的列表组：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

htmlCopy Code
<ol class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ol>

这将创建一个包含三个项目的列表组。每个项目都有 .list-group-item 类。

添加链接和按钮

你可以在列表中添加链接或按钮：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item"><a href="#">Link 1</a></li>
  <li class="list-group-item"><button class="btn btn-primary">Button 1</button></li>
</ul>

htmlCopy Code
<ol class="list-group">
  <li class="list-group-item"><a href="#">Link 1</a></li>
  <li class="list-group-item"><button class="btn btn-primary">Button 1</button></li>
</ol>

添加头部和尾部

你可以在列表组中添加头部和尾部，通过在列表组中添加 .list-group-item 和 .active 类：

htmlCopy Code
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <h5 class="mb-1">List group item heading</h5>
    <p class="mb-1">List group item subheading</p>
  </a>
  <a href="#" class="list-group-item list-group-item-action">Item 1</a>
  <a href="#" class="list-group-item list-group-item-action">Item 2</a>
  <a href="#" class="list-group-item list-group-item-action">Item 3</a>
  <a href="#" class="list-group-item list-group-item-action">Item 4</a>
  <a href="#" class="list-group-item list-group-item-action">Item 5</a>
</div>

这将创建一个包括头部和尾部的列表组。头部和尾部的样式由 .active 类定义。

动态添加和删除元素

使用 JavaScript 可以动态地向列表组中添加或删除元素：

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

<script>
const myList = document.getElementById("myList");
const newItem = document.createElement("a");
newItem.href = "#";
newItem.className = "list-group-item list-group-item-action";
newItem.innerText = "New Item";
myList.appendChild(newItem);
</script>

这将向列表组中添加一个名为 "New Item" 的新项目。

同样，可以使用 .remove() 方法从列表组中删除项目：

htmlCopy Code
<script>
const myList = document.getElementById("myList");
const lastItem = myList.lastChild;
lastItem.remove();
</script>

这将从列表组中删除最后一个项目。

以上是 Bootstrap 列表组的学习笔记及实例。希望对你有所帮助！