Bootstrap 5 侧边栏导航(Offcanvas)
侧边栏导航
Bootstrap5 侧边栏侧边栏类似于 模态框，在移动端设备中比较常用。
标题
一些文本一些文本一些文本
一些文本一些文本一些文本
如何创建侧边栏导航
下面的示例演示如何创建侧边栏导航:
实例
<!-- 画布侧边栏 -->
<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 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-title 类确保了适当的外边距和行高。
然后，将您的内容添加到 .offcanvas-body 类中。
如需打开 offcanvas 侧边栏，您必须使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我们的例子中为 #demo）。
如需使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性而不是 data-bs-target 属性指向 #demo。
Offcanvas 定位
使用 .offcanvas-start|end|top|bottom 属性来设定侧边栏导航的位置: top, bottom, left 或 right:
