Bootstrap 5 Offcanvas

Offcanvas（帆布）

Offcanvas 類似于模態（默認隱藏并在激活時顯示），不同之處在于它通常用作側邊欄導航菜單。

如何創建 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>
<!-- Button to open the offcanvas sidebar -->
<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 側邊欄，您必須使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我們的例子中為 #demo）。

如需使用 <a> 元素打開 offcanvas 側邊欄，您可以使用 href 屬性而不是 data-bs-target 屬性指向 #demo。

Offcanvas 定位

請使用 .offcanvas-start|end|top|bottom 將 offcanvas 定位到左側、右側、頂部或底部：

右側實例

<div class="offcanvas offcanvas-end" id="demo">

親自試一試

頂部實例

<div class="offcanvas offcanvas-top" id="demo">

親自試一試

底部實例

<div class="offcanvas offcanvas-bottom" id="demo">

親自試一試