Bootstrap5 画布
画布
Offcanvas 类似于情态动词（默认情况下隐藏，激活时显示），但通常用作侧边栏导航菜单。
标题
一些文本 lorem ipsum。
一些文本 lorem ipsum。
如何创建 Offcanvas 侧边栏
以下示例展示了如何创建 offcanvas 侧边栏：
示例
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
亲自试一试 »
示例解释
这个.offcanvas类创建 offcanvas 侧边栏。
这个.offcanvas-start类定位offcanvas，并使其宽400px。有关更多定位类别，请参阅下面的示例。
这个.offcanvas-titleclass 确保适当的边距和行高。
然后，将您的内容添加到.offcanvas-body类。
要打开 offcanvas 侧边栏，您必须使用<button>或一个<a>指向 id 的元素.offcanvas容器 （#demo在我们的例子中）。
要使用以下命令打开 offcanvas 侧边栏<a>元素，您可以指向#demo使用 href 属性，而不是data-bs-target属性。
画布位置
使用.offcanvas-start|end|top|bottom将关闭画布定位到左侧、右侧、顶部或底部：
正确的示例
<div class="offcanvas offcanvas-end" id="demo">
标题
一些文本 lorem ipsum。
一些文本 lorem ipsum。
底部示例
<div class="offcanvas offcanvas-bottom" id="demo">
标题
一些文本 lorem ipsum。
一些文本 lorem ipsum。
响应式 OffCanvas 菜单
您还可以控制何时要在不同的屏幕宽度上隐藏或显示 offcanvas 菜单，使用.offcanvas-sm|md|lg|xl|xxl课程：
深色 OffCanvas 菜单
使用.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。
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!