Bootstrap 5教程

Offcanvas（帆布）

Offcanvas 类似于模态（默认隐藏并在激活时显示），不同之处在于它通常用作侧边栏导航菜单。

如何创建 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>

<!-- Button to open the offcanvas sidebar -->
<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 侧边栏，您必须使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我们的例子中为 #demo）。

如需使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性而不是 data-bs-target 属性指向 #demo。

Offcanvas 定位

请使用 .offcanvas-start|end|top|bottom 将 offcanvas 定位到左侧、右侧、顶部或底部：

右侧实例

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

顶部实例

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

底部实例

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