在GitHub上查看

侧边栏

使用一些类和 JavaScript 插件将隐藏的侧边栏构建到你的项目中，用于导航、购物车等。

在本页

运作流程

Offcanvas 是一个侧边栏组件，可以通过 JavaScript 切换以从视口的左侧、右侧或底部边缘显示。按钮或锚点用作附加到你切换的特定元素的触发器，数据属性用于调用我们的 JavaScript。

Offcanvas 与模态共享一些相同的 JavaScript 代码。从概念上讲，它们非常相似，但它们是独立的插件。
类似地，offcanvas 样式和尺寸的一些 source Sass 变量继承自模态变量。
显示时，offcanvas 包含一个默认背景，可以单击以隐藏 offcanvas。
与模态类似，一次只能显示一个画布。

注意！ 由于 CSS 处理动画的方式,你不能在 .offcanvas 元素上使用 margin 或 translate ，相反，将类用作独立的包装元素。

该组件的动画效果依赖于 prefers-reduced-motion 媒体查询。请参阅我们的辅助功能文档的减少动作部分。

示例

画布组件

下面是一个默认显示的 offcanvas 示例（通过 .offcanvas 上的 .show ）.Offcanvas 包括对带有关闭按钮的标题和用于某些初始填充的可选主体类的支持。最好尽可能在关闭操作中包含 offcanvas 标头，或提供明确的关闭操作。

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

实例

使用下面的按钮通过 JavaScript 显示和隐藏 offcanvas 元素，该 JavaScript 使用 .offcanvas 类切换元素上的 .show 类。

.offcanvas 隐藏内容（默认）
.offcanvas.show 显示内容

您可以使用带有 href 属性的链接，或带有 data-bs-target 属性的按钮。在这两种情况下，都需要 data-bs-toggle="offcanvas" 。

Link with href

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

展示位置

offcanvas 组件没有默认位置，因此你必须添加以下修饰符类之一；

.offcanvas-start 将 offcanvas 放在视口的左侧（如上所示）
.offcanvas-end 将 offcanvas 放在视口的右侧
.offcanvas-bottom 将 offcanvas 放在视口的底部

尝试下面的右侧和底部示例。

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

背景

当关闭画布及其背景可见时，禁止滚动 <body> 元素。使用 data-bs-scroll 属性切换 <body> 滚动和 data-bs-backdrop 切换背景。

Try scrolling the rest of the page to see this option in action.

.....

Try scrolling the rest of the page to see this option in action.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

无障碍

由于 offcanvas 面板在概念上是一个模态对话框，请务必将 aria-labelledby="..."（引用 offcanvas 标题）添加到 .offcanvas。请注意，您不需要添加 role="dialog"，因为我们已经通过 JavaScript 添加了它。

Sass

变量

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-body-backdrop-color:     rgba($modal-backdrop-bg, $modal-backdrop-opacity);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

用法

offcanvas 插件利用一些类和属性来处理繁重的工作：

.offcanvas 隐藏内容
.offcanvas.show 显示内容
.offcanvas-start 隐藏左侧的画布
.offcanvas-end 隐藏右侧的画布
.offcanvas-bottom 隐藏底部的画布

添加一个带有 data-bs-dismiss="offcanvas" 属性的关闭按钮，它会触发 JavaScript 功能。确保将 <button> 元素与它一起使用，以便在所有设备上正确运行。

通过数据属性

向元素添加 data-bs-toggle="offcanvas" 和 data-bs-target 或 href 以自动分配一个 offcanvas 元素的控制权。 data-bs-target 属性接受一个 CSS 选择器来应用 offcanvas。确保将类 offcanvas 添加到 offcanvas 元素。如果您希望它默认 show，请添加额外的类。

通过 JavaScript

手动启用：

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-bs-，如 data-bs-backdrop=""。

Name	Type	Default	Description
`backdrop`	boolean	`true`	Apply a backdrop on body while offcanvas is open
`keyboard`	boolean	`true`	Closes the offcanvas when escape key is pressed
`scroll`	boolean	`false`	Allow body scrolling while offcanvas is open

方法

异步方法和转换

所有 API 方法都是异步的开始转换。一旦转换开始，它们就会在转换结束之前返回给调用者。此外，过渡组件上的方法调用将被忽略。

有关更多信息，可以参考 JavaScript 文档。.

将您的内容作为画布元素激活。接受一个可选的选项对象。

您可以使用构造函数创建一个 offcanvas 实例，例如：

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Method	Description
`toggle`	Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs).
`show`	Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the `shown.bs.offcanvas` event occurs).
`hide`	Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the `hidden.bs.offcanvas` event occurs).
`_getInstance`	Static method which allows you to get the offcanvas instance associated with a DOM element

活动

Bootstrap 的 offcanvas 类公开了一些用于挂钩 offcanvas 功能的事件。

Event type	Description
`show.bs.offcanvas`	This event fires immediately when the `show` instance method is called.
`shown.bs.offcanvas`	This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
`hide.bs.offcanvas`	This event is fired immediately when the `hide` method has been called.
`hidden.bs.offcanvas`	This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})