Offcanvas

Offcanvas（帆布）

Offcanvas 類似于模態(tài)（默認(rèn)隱藏并在激活時顯示），不同之處在于它通常用作側(cè)邊欄導(dǎo)航菜單。

如何創(chuàng)建 Offcanvas 側(cè)邊欄

下例展示如何創(chuàng)建 offcanvas 側(cè)邊欄：

實例

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">標(biāo)題</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 側(cè)欄
</button>

例子解釋

.offcanvas 類創(chuàng)建 offcanvas 側(cè)邊欄。

.offcanvas-start 類定位 offcanvas，并將其寬度設(shè)置為 400px。有關(guān)更多的定位類，請參見下面的實例。

.offcanvas-title 類確保了適當(dāng)?shù)耐膺吘嗪托懈摺?/p>

然后，將您的內(nèi)容添加到 .offcanvas-body 類中。

如需打開 offcanvas 側(cè)邊欄，您必須使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我們的例子中為 #demo）。

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

Offcanvas 定位

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

右側(cè)實例

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

頂部實例

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

底部實例

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