Bootstrap 5 Offcanvas
Offcanvas
Offcanvas 類似於 modals（預設隱藏，啟用後顯示），不同之處在於它通常用作側邊欄導航選單。
標題
一些示例文字。
一些示例文字。
如何建立 Offcanvas 側邊欄
以下示例顯示瞭如何建立 offcanvas 側邊欄
示例
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">標題</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>一些示例文字。</p>
<p>一些示例文字。</p>
<button class="btn btn-secondary" type="button">一個按鈕</button>
</div>
</div>
<!-- 開啟 offcanvas 側邊欄的按鈕 -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
開啟 Offcanvas 側邊欄
</button>
自己動手試一試 »
示例解釋
.offcanvas 類建立 offcanvas 側邊欄。
.offcanvas-start 類定位 offcanvas，並使其寬度為 400px。有關更多定位類，請參閱下面的示例。
.offcanvas-title 類可確保正確的邊距和行高。
然後，在 .offcanvas-body 類中新增您的內容。
要開啟 offcanvas 側邊欄，您必須使用指向 .offcanvas 容器 (#demo 在我們的示例中) ID 的 <button> 或 <a> 元素。
要使用 <a> 元素開啟 offcanvas 側邊欄，您可以使用 href 屬性指向 #demo，而不是 data-bs-target 屬性。
Offcanvas 定位
使用 .offcanvas-start|end|top|bottom 將 offcanvas 定位到左側、右側、頂部或底部。
響應式 OffCanvas 選單
您還可以使用 .offcanvas-sm|md|lg|xl|xxl 類來控制在不同螢幕寬度下何時隱藏或顯示 offcanvas 選單。
深色 OffCanvas 選單
使用 .text-bg-dark 類建立深色 offcanvas 選單。
提示：我們還為 .btn-close 添加了 .btn-close-white 類，以建立白色關閉按鈕，與深色背景搭配效果更佳。
示例
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
標題
一些示例文字。
一些示例文字。
