Bootstrap5摺疊面板：節省空間的內容展開/收起

什麼是摺疊面板？¶

在網頁設計中，“摺疊面板”（Collapse）是一種常用的交互組件，它能將大量內容“隱藏”起來，用戶點擊後纔會展開顯示，這樣可以節省頁面空間，讓界面更簡潔。比如常見的 FAQ 列表、產品詳情的展開/收起模塊，都可以用摺疊面板實現。

爲什麼選擇 Bootstrap5 摺疊面板？¶

Bootstrap5 提供了現成的摺疊組件，無需自己寫複雜的 JavaScript 代碼，只需通過簡單的 HTML 類名和 data 屬性就能實現展開/收起效果，還能輕鬆擴展出“手風琴”等高級交互。

一、準備工作：引入 Bootstrap5¶

要使用 Bootstrap5 的摺疊面板，首先需要在 HTML 中引入 Bootstrap5 的 CSS 和 JavaScript 文件。注意：先引入 CSS，再引入 JavaScript（順序不能錯）。

<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap5 JS（依賴 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

二、基礎摺疊面板：一個觸發，一個面板¶

最簡單的摺疊面板包含兩個部分：觸發按鈕（點擊展開/收起）和摺疊內容（默認隱藏）。

代碼示例：¶

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 摺疊面板</title>
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <!-- 觸發按鈕 -->
  <button class="btn btn-primary" 
          data-bs-toggle="collapse"  <!-- 標記爲摺疊組件 -->
          data-bs-target="#demoPanel"> <!-- 關聯摺疊面板的 ID -->
    點擊展開內容
  </button>

  <!-- 摺疊面板內容 -->
  <div class="collapse mt-2" id="demoPanel"> <!-- collapse 類默認隱藏，show 類默認顯示 -->
    這裏是需要摺疊的內容！比如一段長文本、圖片或列表。
    <ul class="mt-2">
      <li>內容項 1</li>
      <li>內容項 2</li>
      <li>內容項 3</li>
    </ul>
  </div>

  <!-- 引入 Bootstrap5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

關鍵參數說明：¶

data-bs-toggle="collapse"：告訴 Bootstrap 這是一個摺疊觸發器，點擊後會控制目標內容。
data-bs-target="#demoPanel"：指定要控制的摺疊面板 ID（# 是必須的，對應摺疊面板的 id）。
class="collapse"：默認隱藏內容，點擊後會自動顯示/隱藏。
class="show"（可選）：如果想讓面板默認展開，在摺疊內容上添加 show 類即可。

三、手風琴效果：多個摺疊面板互斥展開¶

“手風琴”是摺疊面板的常見變體，特點是同一時間只能展開一個面板，點擊新的面板會自動收起之前展開的面板。實現方式是通過 data-bs-parent 指定共享的父容器。

代碼示例：¶

<div class="accordion" id="accordionExample"> <!-- 手風琴的父容器 -->

  <!-- 面板 1 -->
  <div class="accordion-item mb-2">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#collapseOne" 
              data-bs-parent="#accordionExample"> <!-- 關聯父容器 ID -->
        面板標題 1
      </button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseOne"> <!-- 摺疊面板內容 -->
      <div class="accordion-body">
        這裏是面板 1 的詳細內容...
      </div>
    </div>
  </div>

  <!-- 面板 2 -->
  <div class="accordion-item mb-2">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#collapseTwo" 
              data-bs-parent="#accordionExample">
        面板標題 2
      </button>
    </h2>
    <div class="accordion-collapse collapse" id="collapseTwo">
      <div class="accordion-body">
        這裏是面板 2 的詳細內容...
      </div>
    </div>
  </div>

</div>

關鍵點：¶

accordion 類：給父容器添加，標記爲手風琴組件。
accordion-item 類：每個摺疊面板的外層容器，用於分組。
accordion-header 類：標題部分，包含 accordion-button 按鈕。
data-bs-parent="#accordionExample"：確保點擊一個面板時，其他面板自動收起。

四、樣式與自定義¶

Bootstrap5 摺疊面板支持通過內置類快速自定義樣式，比如修改按鈕顏色、圖標等。

自定義按鈕顏色：¶

只需修改 accordion-button 或觸發按鈕的 class，例如用 btn-success 替換默認的 btn-primary：

<button class="accordion-button btn-success" ...>

添加圖標（可選）：¶

可以用 Bootstrap Icons 或 Font Awesome 圖標顯示展開/收起狀態，例如：

<button class="accordion-button" ...>
  <i class="bi bi-chevron-down me-2"></i> <!-- Bootstrap Icons 向下箭頭 -->
  面板標題 1
</button>

展開時，箭頭會自動旋轉（Bootstrap 會通過 CSS 控制圖標方向）。

五、總結¶

Bootstrap5 摺疊面板通過簡單的 data 屬性和類名就能實現展開/收起效果，核心是：
1. 觸發按鈕：data-bs-toggle="collapse" + data-bs-target="#xxx"；
2. 摺疊內容：class="collapse" + 可選 class="show"；
3. 手風琴效果：通過 data-bs-parent 互斥展開多個面板。

應用場景包括 FAQ、產品詳情、導航菜單等需要“隱藏/顯示”內容的地方，既能節省空間，又能提升用戶體驗。

注意事項¶

確保 data-bs-target 或 data-bs-parent 的 ID 與摺疊內容的 id 完全一致；
引入 Bootstrap5 時，JS 文件必須放在最後，否則摺疊功能可能失效；
複雜交互（如動態生成面板）可通過 JavaScript 手動控制 show()/hide() 方法實現。

通過以上步驟，你已經掌握了 Bootstrap5 摺疊面板的基礎用法，動手試試吧！

Bootstrap5摺疊面板：節省空間的內容展開/收起

什麼是摺疊面板？¶

爲什麼選擇 Bootstrap5 摺疊面板？¶

一、準備工作：引入 Bootstrap5¶

二、基礎摺疊面板：一個觸發，一個面板¶

代碼示例：¶

關鍵參數說明：¶

三、手風琴效果：多個摺疊面板互斥展開¶

代碼示例：¶

關鍵點：¶

四、樣式與自定義¶

自定義按鈕顏色：¶

添加圖標（可選）：¶

五、總結¶

注意事項¶

相關文章