Bootstrap5 側邊欄導航(Offcanvas)

Bootstrap5 側邊欄側邊欄類似于模态框，在移動端裝置中比較常用。

我們可以通過 JavaScript 來設定是否在 <code>.offcanvas</code> 類後面添加 <code>.show</code> 類，進而控制側邊欄的顯示與隐藏：

<code>.offcanvas</code> 隐藏内容 (預設)

<code>.offcanvas.show</code> 顯示内容

可以使用 a 連結的 <code>href</code> 屬性或者 button 元素使用 <code>data-bs-target</code> 屬性來設定側邊欄。這兩種情況都需要使用 <code>data-bs-toggle="offcanvas"</code>。

建立滑動導航執行個體如下：

&lt;a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"&gt;

使用連結的 href 屬性

&lt;/a&gt;

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"&gt;

按鈕中使用 data-bs-target

&lt;/button&gt;

&lt;div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"&gt;

&lt;div class="offcanvas-header"&gt;

&lt;h5 class="offcanvas-title" id="offcanvasExampleLabel"&gt;側邊欄&lt;/h5&gt;

&lt;button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"&gt;&lt;/button&gt;

&lt;/div&gt;

&lt;div class="offcanvas-body"&gt;

&lt;div&gt;

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

&lt;div class="dropdown mt-3"&gt;

&lt;button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"&gt;

Dropdown button

&lt;ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;

&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

可以通過以下四個類來控制側邊欄的方向：

<code>.offcanvas-start</code> 顯示在左側，如上執行個體。

<code>.offcanvas-end</code> 顯示在右側

<code>.offcanvas-top</code> 顯示在頂部

<code>.offcanvas-bottom</code> 顯示在底部

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"&gt;頂部導航欄&lt;/button&gt;

&lt;div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"&gt;

&lt;h5 id="offcanvasTopLabel"&gt;顯示在頂部導航欄&lt;/h5&gt;

...

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"&gt;右側側邊欄&lt;/button&gt;

&lt;div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"&gt;

&lt;h5 id="offcanvasRightLabel"&gt;顯示在右側側邊欄&lt;/h5&gt;

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom"&gt;底部導航欄&lt;/button&gt;

&lt;div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"&gt;

&lt;h5 class="offcanvas-title" id="offcanvasBottomLabel"&gt;顯示在底部導航欄&lt;/h5&gt;

&lt;div class="offcanvas-body small"&gt;

我們可以在彈出側邊欄的時候設定 <code>&lt;body&gt;</code> 元素是否可以滾動，也可以設定是否顯示一個背景畫布。 使用 <code>data-bs-scroll</code> 屬性來設定 <code>&lt;body&gt;</code> 元素是否可滾動，<code>data-bs-backdrop</code> 來切換是否顯示背景畫布。

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"&gt;body 元素可以滾動&lt;/button&gt;

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop"&gt;顯示畫布(預設)&lt;/button&gt;

&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions"&gt;允許滾動及顯示畫布&lt;/button&gt;

&lt;div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"&gt;

&lt;h5 class="offcanvas-title" id="offcanvasScrollingLabel"&gt;正文内容可以滾動&lt;/h5&gt;

&lt;p&gt;滾動頁面檢視效果。&lt;/p&gt;

&lt;div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel"&gt;

&lt;h5 class="offcanvas-title" id="offcanvasWithBackdropLabel"&gt;使用背景畫布&lt;/h5&gt;

&lt;p&gt;正文内容不可滾動&lt;/p&gt;

&lt;div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"&gt;

&lt;h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel"&gt;使用背景畫布，正文内容可滾動&lt;/h5&gt;