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 列表樣式的基礎用法，根據實際需求選擇合適的列表類型即可。