建立 2024-01-01 更新 2026-09-15

互動元件

Accordion、Modal、Offcanvas、Dropdown 都要靠頁尾的 JS bundle 才會動。HTML 用 data-bs-toggle 與 data-bs-target 對上目標 id，入門不必自己寫 JavaScript。官方清單見 Get started → JS components。

Accordion

摺疊面板，同一時間通常只開一格。文件：Accordion。

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
              data-bs-toggle="collapse" data-bs-target="#q1">問題一</button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
      <div class="accordion-body">答案寫在這裡。</div>
    </div>
  </div>
</div>

蓋在頁面上的對話框，適合確認、短表單。文件：Modal。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">
  開啟
</button>
<div class="modal fade" id="confirm" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">確認</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
      </div>
      <div class="modal-body">內容</div>
    </div>
  </div>
</div>

Offcanvas 從螢幕邊緣滑出，適合手機選單；文件：Offcanvas。下拉選單要 Popper（已含在 bundle）：Dropdowns。

沒反應時先查這兩件事

JS 檔是否在 </body> 之前、以及 data-bs-target／id 是否拼錯。Bootstrap 5 的 data 屬性都帶 bs 前綴（data-bs-toggle），舊教學的 data-toggle 無效。

完整實作可看影音教學裡 Traversy Media 的 Accordion／Modal 段落，或 Net Ninja 播放清單第 11、16、17 集。

互動元件

Accordion

Modal

Offcanvas 與 Dropdown