Bootstrap5列表样式：有序/无序列表美化方法

一、无序列表美化¶

无序列表（<ul>）默认带有项目符号（圆点），如果想让列表更简洁，可以用 Bootstrap5 的工具类进行调整。

1. 去除默认项目符号¶

默认情况下，无序列表的列表项会显示黑色圆点，使用 .list-unstyled 类可以移除这些项目符号，让列表更干净。

<!-- 默认无序列表（带项目符号） -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- 使用 .list-unstyled 去除项目符号 -->
<ul class="list-unstyled">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

效果对比：第一个列表有圆点，第二个列表无圆点。

2. 横向排列的列表¶

如果需要横向显示列表（如导航菜单、标签），可以用 .list-inline 和 .list-inline-item 组合实现。

<ul class="list-unstyled list-inline">
  <li class="list-inline-item">首页</li>
  <li class="list-inline-item">产品</li>
  <li class="list-inline-item">关于我们</li>
</ul>

效果：列表项横向排列，无项目符号，适合标签、导航等场景。

3. 调整列表项间距¶

默认情况下，列表项之间的间距可能过大或过小，可通过 Bootstrap 的边距类（如 .mb-2）控制间距。

<ul class="list-unstyled">
  <li class="mb-2">HTML</li>
  <li class="mb-2">CSS</li>
  <li>JavaScript</li>
</ul>

效果：前两个列表项下方增加了小间距（.mb-2），更紧凑。

二、有序列表美化¶

有序列表（<ol>）默认带有数字前缀，若不需要数字，或想美化数字列表，可通过以下方式处理。

1. 去除默认数字前缀¶

使用 .list-unstyled 类同样可以移除有序列表的数字前缀，使列表更简洁。

<!-- 默认有序列表（带数字） -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<!-- 使用 .list-unstyled 去除数字 -->
<ol class="list-unstyled">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

2. 使用列表组美化有序列表项¶

如果需要更美观的有序列表（如带边框、背景色的列表），可直接用 Bootstrap5 的列表组（list-group），它支持项目编号、悬停效果等。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    步骤1：学习HTML
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    步骤2：学习CSS
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    步骤3：学习JavaScript
  </a>
</div>

效果：每个列表项有边框，鼠标悬停时背景变色，且支持点击（a 标签）。

三、列表组（List Group）详解¶

列表组是 Bootstrap5 中最强大的列表样式，适用于需要美观、分组或交互的场景（如导航菜单、待办事项）。

1. 基础列表组¶

使用 .list-group 作为容器，list-group-item 作为列表项，简单示例如下：

<div class="list-group">
  <li class="list-group-item">首页</li>
  <li class="list-group-item">产品列表</li>
  <li class="list-group-item">用户中心</li>
</div>

效果：每个列表项有灰色边框，整体简洁有序。

2. 列表项状态控制¶

列表组支持通过类控制列表项的状态，常用状态如下：

激活状态：用 .active 高亮当前选中项（背景色变化）。
禁用状态：用 .disabled 标记禁用项（文字变灰、不可点击）。

<div class="list-group">
  <li class="list-group-item active">首页（当前页）</li>
  <li class="list-group-item">产品列表</li>
  <li class="list-group-item disabled">用户中心（已禁用）</li>
</div>

3. 列表项样式美化¶

通过 Bootstrap 的上下文类或自定义样式，可快速设置列表项的颜色、背景等：

文本颜色：.text-primary（蓝色）、.text-success（绿色）等。
背景色：.bg-primary（蓝色背景）、.bg-light（浅灰背景）等。

<div class="list-group">
  <li class="list-group-item bg-primary text-white">
    蓝色背景+白色文字
  </li>
  <li class="list-group-item text-success">
    绿色文字
  </li>
  <li class="list-group-item small">
    小尺寸文本
  </li>
</div>

4. 列表组尺寸调整¶

通过 .list-group-sm 或 .list-group-lg 控制列表组的整体大小：

<!-- 小尺寸列表组 -->
<div class="list-group list-group-sm">
  <li class="list-group-item">小尺寸项1</li>
  <li class="list-group-item">小尺寸项2</li>
</div>

<!-- 大尺寸列表组 -->
<div class="list-group list-group-lg">
  <li class="list-group-item">大尺寸项1</li>
  <li class="list-group-item">大尺寸项2</li>
</div>

四、实用技巧总结¶

简单列表：用 .list-unstyled 去除项目符号，适合纯文本列表。
横向列表：用 .list-inline + .list-inline-item 实现标签、导航等横向排列。
交互列表：用 list-group 实现带边框、悬停效果的列表，支持点击或状态标记。
颜色与间距：结合 Bootstrap 上下文类（.text-*、.bg-*）和边距类（.mb-*）快速美化。

通过以上方法，初学者可快速掌握 Bootstrap5 列表样式的基础用法，根据实际需求选择合适的列表类型即可。