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:

右侧实例

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

标题

一些文字一些文字一些文字

一些文字一些文字一些文字

亲自试一试 »

顶部实例

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

标题

一些文字一些文字一些文字

一些文字一些文字一些文字

亲自试一试 »

底部实例

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

标题

一些文字一些文字一些文字

一些文字一些文字一些文字

亲自试一试 »