Bootstrap 5 Offcanvas
Bootstrap是一个免费的开源 CSS 和 JavaScript/jQuery 代码集合，用于创建响应式和动态的网站布局和 Web 应用程序。 Offcanvas是 Bootstrap 的功能之一，可以使网页更具吸引力，同时增强用户体验。
Offcanvas是一个侧边栏组件，可帮助使用 Javascript 切换视图，以从视口的左侧、右侧或底部边缘显示。为了切换视图，可以将按钮用作触发器，它与特定元素一起声明，并使用 data 属性来利用它来调用 JavaScript。它类似于Bootstrap Modal，一次只能显示单个 offcanvas。可以使用offcanvas功能完成整个页面的导航。
Offcanvas 组件： Offcanvas 包含带有关闭按钮的标题和正文部分。最好包含一个关闭按钮，或者您可以提供一个明确的来源来关闭它。
句法：
Heading
Content Body
Offcanvas 组件类：
- offcanvas ：此类用于创建 offcanvas，但它隐藏了内容。
- offcanvas show ：此类用于在视口中显示 offcanvas 内容。
- offcanvas-header ：此类用于 offcanvas 的头部部分。
- offcanvas-body ：此类用于向 offcanvas 正文部分添加内容。
示例：此示例描述了在 Bootstrap 中使用 Basic Offcanvas。
HTML
Bootstrap Offcanvas
Offcanvas
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Offcanvas
Offcanvas left
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas right
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas top
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas bottom
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Sidebar
GeeksforGeeks
Scrolling is inactive (default)
backdrop is active (default)
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Offcanvas
GeeksforGeeks
Scrolling is inactive (default)
backdrop is inactive
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Offcanvas
GeeksforGeeks
Scrolling is active
backdrop is active
Bootstrap is the most popular CSS Framework
for developing responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Sidebar
GeeksforGeeks
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Offcanvas
GeeksforGeeks
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
HTML
Bootstrap Offcanvas
Link with href
GeeksforGeeks
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
Offcanvas Placement： Offcanvas 放置可用于以各种方式定位 offcanvas，例如顶部、底部、右侧和视口的开始。画布外组件没有默认放置。
句法：
画布安置班：
- offcanvas-start：该类用于将 offcanvas 放置在视口的左侧。
- offcanvas-end：该类用于将 offcanvas 放置在视口的右侧。
- offcanvas-top ：此类用于将 offcanvas 放置在视口的顶部。
- offcanvas-bottom ：此类用于将 offcanvas 放置在视口的底部。
示例：在此示例中，我们将演示视口中的画布外放置。
HTML
Bootstrap Offcanvas
Offcanvas left
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas right
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas top
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Offcanvas bottom
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
Offcanvas Backdrop：background选项指定 offcanvas 具有深色叠加层（当前页面的背景颜色）。默认情况下，背景是活动的。使用data-bs-backdrop属性并将其值设置为false以禁用背景。
句法：
Content
示例 1：在此示例中，我们将使用默认选项演示 offcanvas。默认情况下，背景选项处于活动状态，滚动处于非活动状态。
HTML
Bootstrap Sidebar
GeeksforGeeks
Scrolling is inactive (default)
backdrop is active (default)
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
示例 2：在此示例中，我们将演示具有非活动背景的 offcanvas。使用data-bs-backdrop属性并将其值设置为 false 以禁用背景。
HTML
Bootstrap Offcanvas
GeeksforGeeks
Scrolling is inactive (default)
backdrop is inactive
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
背景滚动：默认为非活动状态，意味着背景内容不可滚动。使用data-bs-scroll属性并将其值设置为 true 以激活背景滚动。
示例 3 ：在此示例中，我们将演示带有滚动和背景的画布。
HTML
Bootstrap Offcanvas
GeeksforGeeks
Scrolling is active
backdrop is active
Bootstrap is the most popular CSS Framework
for developing responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
带有下拉菜单的 Offcanvas： Offcanvas 简化了包含选项列表的下拉菜单，这些选项仅在用户与菜单交互时才会显示。
句法：
使用类：
- dropdown-menu ：该类用于创建下拉菜单。
- dropdown-item ：此类用于列出下拉项目。
示例：在此示例中，我们将使用下拉菜单演示 offcanvas。
HTML
Bootstrap Sidebar
GeeksforGeeks
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
带有垂直菜单的 Offcanvas： Offcanvas 提供了一个垂直菜单来从选项中进行选择，当用户与菜单交互时将显示该菜单。
句法：
使用类：
- navbar-nav ：此类用于创建垂直菜单。
- nav-link ：此类用于向垂直菜单添加项目。
示例：在此示例中，我们将演示带有垂直菜单的 offcanvas。
HTML
Bootstrap Offcanvas
GeeksforGeeks
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
使用 Sass 变量的可访问性：
Sass 变量是用来代替属性值的变量。这里一些 sass 变量由引导模型给出。您可以使用此变量来增强 offcanvas 的样式。
- $offcanvas-padding-y : $modal-inner-padding ;
- $offcanvas-padding-x : $modal-inner-padding ;
- $offcanvas-bg-color : $modal-content-bg ;
- $offcanvas-color : $modal-content-color ;
- $offcanvas-水平宽度：400px；
- $offcanvas-border-color : $modal-content-border-color ;
- $offcanvas-border-width : $modal-content-border-width ;
- $offcanvas-box-shadow : $modal-content-box-shadow-xs ;
画布用途：
- 通过数据属性
句法：
使用类：
- offcanvas ：此类用于创建 offcanvas，但它隐藏了内容。
通过 JavaScript：
语法：
var offcanvasElementList =
[].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList =
offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl) })- 通过选项：
- 背景：其默认值为 true。当 offcanvas 打开时，您可以看到背景对身体的影响。正如上面的示例中已经显示的那样。
- Scroll ：其默认值为 false。您可以在 offcanvas 打开时允许正文滚动。正如上面的示例中已经显示的那样。
- 通过事件：
- show.bs.offcanvas ：调用 show 实例方法时立即触发此事件。
- shown.bs.offcanvas ：当 offcanvas 元素对用户可见时触发此事件。
- hide.bs.offcanvas ：调用 hide 方法时立即触发此事件。
- hidden.bs.offcanvas ：当用户隐藏了 offcanvas 元素时会触发此事件。
- 通过方法：
- toggle() ：此方法切换要显示或隐藏的 offcanvas 元素。在 offcanvas 元素实际显示或隐藏之前返回给调用者。
- show()：此方法显示一个 offcanvas 元素。在实际显示 offcanvas 元素之前返回给调用者。
- Hide() ：隐藏画布外元素。在 offcanvas 元素实际被隐藏之前返回给调用者。
示例：在此示例中，我们将演示从 href 属性和 data-bs-target 属性中使用 offcanvas。
HTML
Bootstrap Offcanvas
Link with href
GeeksforGeeks
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
A computer science portal for geeks.
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
输出：
参考：https://getbootstrap.com/docs/5.0/components/offcanvas/