列表组是用于显示一组相关项目的组件。它允许您轻松地创建一个可自定义的列表，并为其中的项目添加不同的样式和行为。
列表组的基本用法
要创建一个基本的列表组，只需将一个无序列表或有序列表包裹在 .list-group 类中即可。列表中的每个条目应该是一个带有 .list-group-item 类的 <li> 元素。
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
定制列表项
列表项可以通过多种方式来定制。你可以通过添加类来改变它们的外观或行为。
活动状态
使用 .active 类可以将列表项标记为活动状态。
<ul class="list-group"> <li class="list-group-item active">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
不可用状态
使用 .disabled 类可以使列表项不可用。
<ul class="list-group"> <li class="list-group-item disabled">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
链接
可以将列表项设置为链接。只需将 <a> 标签包裹在 <li> 标签内，并给 <a> 标签添加 .list-group-item-action 类。
<ul class="list-group"> <li class="list-group-item list-group-item-action"><a href="#">Cras justo odio</a></li> <li class="list-group-item list-group-item-action"><a href="#">Dapibus ac facilisis in</a></li> <li class="list-group-item list-group-item-action"><a href="#">Morbi leo risus</a></li> <li class="list-group-item list-group-item-action"><a href="#">Porta ac consectetur ac</a></li> <li class="list-group-item list-group-item-action"><a href="#">Vestibulum at eros</a></li> </ul>
列表组的变体
Bootstrap 提供了多种列表组的变体，使您可以根据需要调整其样式和功能。
自定义颜色
通过将颜色类应用到 .list-group-item 上，您可以更改列表项的颜色。
-- -------------------- ---- ------- --- ------------------- --- ---------------------- -------------------------- ------ ------- ---- ----- --------- --- ---------------------- ---------------------------- ------ --------- ---- ----- --------- --- ---------------------- -------------------------- ------ ------- ---- ----- --------- --- ---------------------- ------------------------- ------ ------ ---- ----- --------- --- ---------------------- -------------------------- ------ ------- ---- ----- --------- --- ---------------------- ----------------------- ------ ---- ---- ----- --------- --- ---------------------- ------------------------ ------ ----- ---- ----- --------- --- ---------------------- ----------------------- ------ ---- ---- ----- --------- -----
带边框的列表组
通过将 .list-group-flush 类添加到列表组上，您可以去除列表项之间的圆角，从而使其看起来更整洁。
<ul class="list-group list-group-flush"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul>
列表组中的按钮
除了链接之外，列表组还可以包含按钮。这可以通过将按钮包裹在 <li> 标签内来实现。
<ul class="list-group"> <li class="list-group-item"><button type="button" class="btn btn-primary btn-block">Primary button</button></li> <li class="list-group-item"><button type="button" class="btn btn-secondary btn-block">Button</button></li> </ul>
使用图标增强列表项
通过添加 Font Awesome 或其他图标库，可以为列表项增添视觉吸引力。
-- -------------------- ---- -------
--- -------------------
--- ---------------------- ------ ----------------------- --------------------
---- ----- ----
----- ------------ ------------- ---------------------
-----
--- ---------------------- ------ ----------------------- --------------------
------- -- --------- --
-- ---------- -------------
-----
--- ---------------------- ------ ----------------------- --------------------
----- --- -----
----- ------------ ------------- ---------------------
-----
-----动态内容
列表组也可以动态生成，例如从数据库中获取数据。以下示例展示了如何使用 JavaScript 和 Bootstrap 的动态功能。
-- -------------------- ---- -------
---- ----------------------- -------------------
------
--------
----- ----- - ------ ----- ------ -------- -- --------- ---- ------ --- --------
----- --------- - ----------------------------------------------
--- ------ ---- -- ------ -
----- -------- - -----------------------------
------------------ - ------------------
-------------------- - -----
--------------------------------
-
---------以上是关于 Bootstrap 5 中列表组的详细指南。通过这些示例和技巧，您可以创建出既美观又功能丰富的列表组件。