Bootstrap 5 Offcanvas
Offcanvas
Offcanvas 类似于 modals（默认隐藏，激活后显示），不同之处在于它通常用作侧边栏导航菜单。
标题
一些示例文本。
一些示例文本。
如何创建 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>
<!-- 打开 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 侧边栏，您必须使用指向 .offcanvas 容器 (#demo 在我们的示例中) ID 的 <button> 或 <a> 元素。
要使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性指向 #demo，而不是 data-bs-target 属性。
Offcanvas 定位
使用 .offcanvas-start|end|top|bottom 将 offcanvas 定位到左侧、右侧、顶部或底部。
响应式 OffCanvas 菜单
您还可以使用 .offcanvas-sm|md|lg|xl|xxl 类来控制在不同屏幕宽度下何时隐藏或显示 offcanvas 菜单。
深色 OffCanvas 菜单
使用 .text-bg-dark 类创建深色 offcanvas 菜单。
提示：我们还为 .btn-close 添加了 .btn-close-white 类，以创建白色关闭按钮，与深色背景搭配效果更佳。
示例
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
标题
一些示例文本。
一些示例文本。
