Offcanvas侧滑导航

~~Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.~~使用一些类和我们的JavaScript插件，在项目中构建隐藏的侧栏，用于导航、购物车等。

~~On this page~~本页内容

How it works工作原理

~~Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.~~ Offcanvas是一个边栏组件，可以通过JavaScript进行切换，从视口的左、右或下边缘显示。~~Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.~~按钮或锚定被用作附加到您切换的特定元素的触发器，data属性被用于调用我们的JavaScript。

~~Offcanvas shares some of the same JavaScript code as modals.~~ Offcanvas与modals共享一些相同的JavaScript代码。~~Conceptually, they are quite similar, but they are separate plugins.~~从概念上讲，它们非常相似，但它们是独立的插件。
~~Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.~~类似地，offcanvas样式和维度的一些源Sass变量继承自模态变量。
~~When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.~~显示时，offcanvas包含一个默认背幕，单击该背幕可以隐藏offcanvas。
~~Similar to modals, only one offcanvas can be shown at a time.~~与情态动词类似，一次只能显示一个offcanvas。

Heads up! ~~Given how CSS handles animations, you cannot use margin or translate on an .offcanvas element.~~ 考虑到CSS处理动画的方式，您不能在.offcanvas元素上使用margin或translate。~~Instead, use the class as an independent wrapping element.~~相反，将该类用作独立的包装元素。

~~The animation effect of this component is dependent on the prefers-reduced-motion media query.~~ 此组件的动画效果取决于prefers-reduced-motion媒体查询。~~See the reduced motion section of our accessibility documentation.~~请参阅我们的易访问性文档中的简化运动部分。

Examples例子

Offcanvas components非画布组件

~~Below is an offcanvas example that is shown by default (via .show on .offcanvas).~~ 下面是默认情况下显示的offcanvas示例（通过.offcanvas上的.show）。~~Offcanvas includes support for a header with a close button and an optional body class for some initial padding.~~ Offcanvas包括对带有关闭按钮的标题的支持，以及对某些初始padding的可选主体类的支持。~~We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.~~我们建议您尽可能将offcanvas头包含在disclose操作中，或者提供一个明确的disclose操作。

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

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<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>

Live demo现场演示

~~Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.~~使用下面的按钮通过JavaScript显示和隐藏offcanvas元素，该JavaScript将元素上的.show类与.offcanvas类切换。

.offcanvas ~~hides content (default)~~隐藏内容（默认）
.offcanvas.show ~~shows content~~显示内容

~~You can use a link with the href attribute, or a button with the data-bs-target attribute.~~ 您可以使用带有href属性的链接，或带有data-bs-target属性的按钮。~~In both cases, the data-bs-toggle="offcanvas" is required.~~在这两种情况下都需要data-bs-toggle="offcanvas"。

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

<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>

Placement安置

~~There’s no default placement for offcanvas components, so you must add one of the modifier classes below;~~offcanvas组件没有默认放置，因此必须添加下面的一个修饰符类；

.offcanvas-start ~~places offcanvas on the left of the viewport (shown above)~~将offcanvas放置在视口左侧（如上所示）
.offcanvas-end ~~places offcanvas on the right of the viewport~~将画布放置在视口右侧
.offcanvas-top ~~places offcanvas on the top of the viewport~~将画布放置在视口顶部
.offcanvas-bottom ~~places offcanvas on the bottom of the viewport~~将画布放置在视口底部

~~Try the top, right, and bottom examples out below.~~尝试下面的顶部、右侧和底部示例。

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</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="#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>

Backdrop背幕

~~Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible.~~ 当offcanvas及其背幕可见时，滚动<body>元素被禁用。~~Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.~~使用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>

Accessibility可访问性

~~Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."—referencing the offcanvas title—to .offcanvas.~~ 由于offcanvas面板在概念上是一个模态对话框，请确保对.offcanvas添加aria-labelledby="..."，引用offcanvas的标题。~~Note that you don’t need to add role="dialog" since we already add it via JavaScript.~~请注意，你不需要添加role="dialog"，因为我们已经通过JavaScript添加了它。

Sass

Variables变量

$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-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Usage用法

~~The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:~~offcanvas插件利用几个类和属性来处理繁重的工作：

.offcanvas ~~hides the content~~隐藏内容
.offcanvas.show ~~shows the content~~显示内容
.offcanvas-start ~~hides the offcanvas on the left~~隐藏左侧的画布
.offcanvas-end ~~hides the offcanvas on the right~~隐藏右侧的画布
.offcanvas-bottom ~~hides the offcanvas on the bottom~~隐藏底部的画布

Add a dismiss button with the data-bs-dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Via data attributes通过data属性

Toggle切换

~~Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element.~~ 向元素添加data-bs-toggle="offcanvas"和data-bs-target或href以自动分配某个offcanvas元素的控制。~~The data-bs-target attribute accepts a CSS selector to apply the offcanvas to.~~ data-bs-target属性接受CSS选择器以应用offcanvas。~~Be sure to add the class offcanvas to the offcanvas element.~~ 确保将.offcanvas类添加到offcanvas元素。~~If you’d like it to default open, add the additional class show.~~如果希望它默认打开，请添加额外的.show类。

Dismiss撤除

~~Dismissal can be achieved with the data attribute on a button within the offcanvas as demonstrated below:~~撤除可以通过offcanvas内按钮上的data属性实现，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

~~or on a button outside the offcanvas using the data-bs-target as demonstrated below:~~或在offcanvas外的按钮上使用data-bs-target，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

~~While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match the WAI-ARIA modal dialog design pattern.~~ 虽然支持两种关闭offcanvas的方法，但请记住，从offcanvas外部关闭与WAI-ARIA模态对话框设计模式不匹配。~~Do this at your own risk.~~这样做的风险由你自己承担。

Via 通过JavaScript

~~Enable manually with:~~通过以下方式手动启用：

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

Options选项

~~Options can be passed via data attributes or JavaScript.~~ 选项可以通过data属性或JavaScript传递。~~For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".~~对于data属性，请将选项名称追加到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~~按escape键时关闭offcanvas
`scroll`	boolean	`false`	~~Allow body scrolling while offcanvas is open~~在offcanvas打开时允许正文滚动

Methods方法

Asynchronous methods and transitions异步方法和转换

~~All API methods are asynchronous and start a transition.~~ 所有API方法都是异步的，并开始转换。~~They return to the caller as soon as the transition is started but before it ends.~~ 转换一开始，但在转换结束之前，它们就返回给调用方。~~In addition, a method call on a transitioning component will be ignored.~~此外，对转换组件的方法调用将被忽略。

~~See our JavaScript documentation for more information.~~有关更多信息，请参阅我们的JavaScript文档。

~~Activates your content as an offcanvas element.~~ 将内容激活为非画布元素。~~Accepts an optional options object.~~接受可选的选项object。

~~You can create an offcanvas instance with the constructor, for example:~~您可以使用构造函数创建offcanvas实例，例如：

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

~~Method~~方法	~~Description~~描述
`toggle`	~~Toggles an offcanvas element to shown or hidden.~~ 将offcanvas元素切换为显示或隐藏。~~Returns to the caller before the offcanvas element has actually been shown or hidden~~在实际显示或隐藏offcanvas元素之前返回调用方 ~~(i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs).~~（亦即，在`shown.bs.offcanvas`事件或`hidden.bs.offcanvas`事件发生前）
`show`	~~Shows an offcanvas element.~~ 显示非画布元素。~~Returns to the caller before the offcanvas element has actually been shown~~在实际显示offcanvas元素之前返回调用方 ~~(i.e. before the `shown.bs.offcanvas` event occurs).~~（亦即，`hidden.bs.offcanvas`事件发生前）。
`hide`	~~Hides an offcanvas element.~~ 隐藏非画布元素。~~Returns to the caller before the offcanvas element has actually been hidden~~在offcanvas元素实际隐藏之前返回调用方 ~~(i.e. before the `hidden.bs.offcanvas` event occurs).~~（亦即，`hidden.bs.offcanvas`事件发生前）。
`getInstance`	Static method which allows you to get the offcanvas instance associated with a DOM element静态方法，该方法允许您获取与DOM元素关联的offcanvas实例
`getOrCreateInstance`	Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialised静态方法，该方法允许您获取与DOM元素关联的offcanvas实例，或者在未初始化的情况下创建一个新实例

Events事件

~~Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.~~Bootstrap的.offcanvas类公开了一些事件，用于连接到offcanvas功能。

~~Event type~~事件类型	~~Description~~描述
`show.bs.offcanvas`	~~This event fires immediately when the `show` instance method is called.~~调用`show`实例方法时，此事件立即激发。
`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).~~当用户看到offcanvas元素时（将等待CSS转换完成），将触发此事件。
`hide.bs.offcanvas`	~~This event is fired immediately when the `hide` method has been called.~~调用`hide`方法后，将立即触发此事件。
`hidden.bs.offcanvas`	~~This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).~~当对用户隐藏offcanvas元素时（将等待CSS转换完成），将触发此事件。

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