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;