前端必知必会-Bootstrap 5 Offcanvas

---

Bootstrap 5 Offcanvas

Offcanvas 与模式窗口类似（默认隐藏，激活时显示），但通常用作侧边栏导航菜单。

如何创建 Offcanvas 侧边栏

以下示例展示了如何创建 Offcanvas 侧边栏：

示例

<!-- Offcanvas 侧边栏 -->
<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>一些文字 lorem ipsum。</p>
<p>一些文字 lorem ipsum。</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 侧边栏，您必须使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我们的示例中为 #demo）。

要使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性指向 #demo，而不是 data-bs-target 属性。

Offcanvas位置

使用 .offcanvas-start|end|top|bottom 将画布外定位到左侧、右侧、顶部或底部：

右侧示例

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

顶部示例

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

底部示例

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

响应式Offcanvas菜单

您还可以使用 .offcanvas-sm|md|lg|xl|xxl 类来控制何时在不同屏幕宽度上隐藏或显示画布外菜单：

示例

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">

深色画布外菜单
使用 .text-bg-dark 类创建深色画布外菜单。

提示：我们还将 .btn-close-white 类添加到 .btn-close，以创建一个与深色背景搭配起来好看的白色关闭按钮：

示例

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>

---

总结

本文介绍了Bootstrap 5 Offcanvas的使用，如有问题欢迎私信和评论