以下是原文翻译成繁體中文的版本，使用Markdown格式：

Bootstrap - Collapse

# Bootstrap - 折疊：初学者的全面指南

你好，有志於網頁開發的各位！今天，我們將深入 Bootstrap 最有用的組件之一：折疊（Collapse）。把它想成一個網頁魔術 - 現在你看得到它，現在你看不到！讓我們一起踏上這個令人興奮的旅程。

## 什么是 Bootstrap 折疊？

在我們進行代碼之前，讓我們了解一下折疊是什麼。想像你在你的網站上有一篇很長的文章，但你不想一開始就讓訪客看到所有的文字。這就是折疊出場救援的時候了！它允許你通過一次簡單的點擊來隱藏和顯示內容，使你的網頁更加互動和用戶友好。

## 基本範例

讓我們從一個基本範例開始，熟悉一下。

```html
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    點我顯示一個秘密！
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    秘密是...你學習 Bootstrap 真是太棒了！
  </div>
</div>

讓我們分解一下：

我們有一個按鈕（風格設置為鏈接），用於觸發折疊。
data-bs-toggle="collapse" 屬性告訴 Bootstrap 這個元素控制一個可折疊的區域。
href="#collapseExample" 指向折疊內容的 ID。
折疊內容被包裹在一個具有 collapse 類和匹配按鈕中 href 的 ID 的 div 中。

當你點擊按鈕時，Bootstrap 的 JavaScript 魔法發生，瞧！你的內容出現或消失。

水平折疊

現在，讓我們來點刺激的，試試水平折疊。就像你的內容在玩捉迷藏，但是是側著玩的！

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    切換寬度折疊
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      這是一些水平折疊的占位內容。它默認是隱藏的，並在觸發時顯示。
    </div>
  </div>
</div>

這裡的主要區別在於：

我們使用了 collapse-horizontal 類與 collapse 一起。
我們在可折疊內容上設置了一個特定的寬度。
外部的 div 有 min-height，以確保在切換折疊時其他元素不會跳動。

多個切換和目標

現在，讓我們創造一個折疊元素的交響曲！我們可以有多個按鈕控制不同的（或相同的）折疊區域。

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">切換第一個元素</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">切換第二個元素</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">切換所有元素</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        這是這個多折疊範例的第一個折疊組件的一些占位內容。
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        這是這個多折疊範例的第二個折疊組件的一些占位內容。
      </div>
    </div>
  </div>
</div>

這裡發生了什麼：

我們有三個按鈕：兩個控制個別的折疊，一個控制全部。
第三個按鈕使用 .multi-collapse 來目標所有折疊區域。
每個折疊區域都有一個唯一的 ID 和 multi-collapse 類。

無障礙性

作為負責任的開發者，我們需要確保我們的網站對所有人都可以訪問。Bootstrap 的折疊組件帶有內置的無障礙功能，但我們可以進一步提升它們：

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
  無障礙折疊按鈕
</button>

<div class="collapse" id="accessibleCollapse">
  <div class="card card-body">
    這個內容是隱藏的，但對於屏幕閱讀器是可訪問的。
  </div>
</div>

關鍵的無障礙功能：

aria-expanded 屬性告訴屏幕閱讀器折疊內容當前是否可見。
aria-controls 屬性將按鈕與折疊內容相關聯。

方法表格

這裡有一個方便的折疊方法表格，你可以在你的 JavaScript 中使用：

方法	描述
`collapse('toggle')`	切換一個可折疊元素
`collapse('show')`	顯示一個可折疊元素
`collapse('hide')`	隱藏一個可折疊元素
`collapse('dispose')`	销毀一個元素的折疊

要使用這些方法，你可以像這樣：

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
  toggle: false
})
bsCollapse.show()

那就是它，各位！你剛剛掌握了 Bootstrap 折疊的藝術。記住，熟能生巧，所以不要害怕嘗試這些範例。在你還沒有察覺之前，你將能夠創建有如折紙般折疊和展開的網頁！

快樂編程，願你的折疊總是順暢，你的切換總是靈敏！

Credits: Image by storyset