Bootstrap 5 侧边抽屉
侧边抽屉
侧边抽屉类似于 模态框（默认隐藏，激活时显示），但通常用作侧边导航菜单。
标题
一些 Lorem Ipsum 文本。
一些 Lorem Ipsum 文本。
如何创建侧边抽屉
以下示例展示了如何创建侧边抽屉
示例
<!-- 侧边抽屉 -->
<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>
<!-- 打开侧边抽屉的按钮 -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
打开侧边抽屉
</button>
亲自尝试 »
示例说明
.offcanvas 类创建侧边抽屉。
.offcanvas-start 类定位侧边抽屉，并将其宽度设置为 400px。请参见下面的示例以获取更多定位类。
.offcanvas-title 类确保适当的边距和行高。
然后，在 .offcanvas-body 类内添加您的内容。
要打开侧边抽屉，您必须使用 <button> 或 <a> 元素，该元素指向 .offcanvas 容器的 id（在我们的示例中为 #demo）。
要使用 <a> 元素打开侧边抽屉，您可以使用 href 属性指向 #demo，而不是 data-bs-target 属性。
侧边抽屉位置
使用 .offcanvas-start|end|top|bottom 将侧边抽屉定位到左侧、右侧、顶部或底部
右侧示例
<div class="offcanvas offcanvas-end" id="demo">
标题
一些 Lorem Ipsum 文本。
一些 Lorem Ipsum 文本。
顶部示例
<div class="offcanvas offcanvas-top" id="demo">
标题
一些 Lorem Ipsum 文本。
一些 Lorem Ipsum 文本。
底部示例
<div class="offcanvas offcanvas-bottom" id="demo">
标题
一些 Lorem Ipsum 文本。
一些 Lorem Ipsum 文本。
响应式侧边抽屉菜单
您还可以使用 .offcanvas-sm|md|lg|xl|xxl 类控制在不同屏幕宽度下何时隐藏或显示侧边抽屉菜单
暗色侧边抽屉菜单
使用 .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>
标题
一些 Lorem Ipsum 文本。
一些 Lorem Ipsum 文本。
