Bootstrap - Offcanvas

本章讨论offcanvas组件。Bootstrap 中的 offcanvas 组件是一项功能，允许您创建可以在视口侧面显示或隐藏的滑动面板或侧边栏。

它通常用于创建导航菜单、内容面板或可以临时显示而不占用全屏空间的附加信息。

概述

下面列出了 Bootstrap offcanvas 组件的主要功能：

激活：offcanvas 组件通常由触发 offcanvas 面板打开和关闭的切换按钮或链接激活。这可以使用 JavaScript 或数据属性来实现。
放置：根据您的设计要求，offcanvas 面板可以放置在视口的左侧、右侧、顶部或底部。
内容：您可以在 offcanvas 面板中放置任何 HTML 内容，包括导航菜单、文本、图像、表单或其他组件。
可访问性：Bootstrap 确保屏幕阅读器和键盘导航可以访问 offcanvas 组件，使其符合可访问性标准。
响应式Behave：offcanvas 组件默认是响应式的，适应不同的屏幕尺寸。在较小的屏幕上，它可以全屏显示或允许在画布外面板内滚动。
事件：Bootstrap 提供了 JavaScript 事件，可用于自定义 offcanvas 组件的Behave，例如在面板打开或关闭时执行代码。

它简化了滑动面板的创建，有助于改善移动设备上的用户体验，提供一种干净有效的方式来呈现附加内容或导航选项，而不会使主屏幕混乱。

注意：一次只能显示一个offcanvas，就像模态框一样。

画布组件

以下组件协同工作，在 Bootstrap 中创建 offcanvas 功能，允许您创建滑动面板，在通过切换按钮或链接触发时显示其他内容或导航选项：

切换按钮或触发元素
Offcanvas 面板容器
帆布面板
画布外放置
关闭按钮
JavaScript 和数据属性

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas component</h4>
		<div class="container">
		<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
            Open offcanvas
        </button>
    	</div>
      <div class="offcanvas offcanvas-end" id="offcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                Offcanvas title
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p>
        </div>
	    </div>
    </div>
  </body>
</html>

现场演示

Offcanvas 组件可以根据以下条件显示或隐藏：

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

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas component live demo</h4>
		  <button class="btn btn-primary" type="button" id="trigger-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
			Button click
		  </button>

		  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.
			  </div>
			</div>
		  </div>
    </div>
	  <script>
		  //New instance of the collapse element is created
	  	  var offcanvasElement = document.getElementById("offcanvasExample");
	  	  var offcanvas = new bootstrap.Offcanvas(offcanvasElement);

		    let button = document.getElementById("trigger-btn");
	  	  button.addEventListener("click", () => {
		    return offcanvas.show();
		    ;
	 	  });
    </script>
  </body>
</html>

身体滚动

当offcanvas及其背景可见时，<body>元素的滚动被禁止。要启用<body>元素的滚动，您可以使用data-bs-scroll属性。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">Offcanvas</h1>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <hr>
        <div class="offcanvas-body">
            <h5>Enable body Scrolling</h5>
            <h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</p></h5>
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">Offcanvas Scrolling Enable</button>
        <center>
          <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
        </center>
    </div>
</body>
</html>

身体滚动和背景

您可以启用带有可见背景的<body>滚动。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <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">Enable backdrop with scrolling</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
		<hr>
        <div class="offcanvas-body">
            <h5><p>Bootstrap provides features to scroll the page  and the backdrop are visible.</p></h5>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			  A website for all the tech-savvy people.
            </h4>
            <h3>
			  Welcome to tutorials point
			  Welcome to tutorials point
            </h3>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button>
        <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            </center>
    </div>
</body>
</html>

静态背景

当背景设置为静态时，offcanvas 组件在单击时不会关闭。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
			Static Offcanvas
		  </button>
		  <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The offcanvas component will not get closed when you click outside it.
			  </div>
			</div>
		  </div>
          <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
            </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
      				A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
            <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
          </center>
    </div>
</body>
</html>

深色画布

由于颜色模式的实施，在 v5.3.0 中已弃用组件的深色变体。建议将data-bs-theme="dark"属性应用于根元素、父包装器或组件本身，而不是手动包含上述类。

反应灵敏

响应式的 Offcanvas 类会隐藏从指定断点开始向下超出视口的内容。另一方面，内容在该断点之上表现正常。例如，对于.offcanvas-lg类，位于lg断点下方的内容隐藏在 offcanvas 中，而在该断点上方则可见。

注意：您需要调整浏览器大小才能看到 offcanvas 的响应Behave。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Responsive offcanvas</h4>
		<div class="container">
			<button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button>
			<div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div>
			<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
			  <div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
			  </div>
			  <div class="offcanvas-body">
				<p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p>
			  </div>
			</div>
		</div>
    </div>
  </body>
</html>

响应式 offcanvas 的类可以在每个断点处访问。

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

放置

您必须添加修改器类之一，才能将放置添加到 offcanvas 组件，因为它没有默认放置。

以下是可用的放置选项：

.offcanvas-start - 它将 offcanvas 放置在视口的左侧。
.offcanvas-end - 它将 offcanvas 放置在视口的右侧。
.offcanvas-top - 它将 offcanvas 放置在视口的顶部。
.offcanvas-bottom - 它将 offcanvas 放置在视口的底部。

让我们看一个放置示例 - top::

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas placement - Top</h4>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button>
			<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  			<div class="offcanvas-header text-bg-primary">
    		<h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-primary-subtle">
				<p>This is an example for an offcanvas whose placement is at the top of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

让我们看一个放置示例 - 右：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <头>
    <title>Bootstrap - Offcanvas</title>
    <元字符集=“UTF-8”>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </头>
  <正文>
    <div class="容器 mt-3">
		<h4 class="text-success text-start">Offcanvas 放置 - 右</h4>
		<div 类=“容器”>
			<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">右offcanvas</button>
			<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  			<div class="offcanvas-header text-bg-success">
    		<h5 class="offcanvas-title" id="offcanvasRightLabel">右offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-success-subtle">
				<p>这是一个放置在视口右侧的关闭画布的示例。</p>
  			</div>
			</div>
		</div>
    </div>
  </正文>
</html>

让我们看一个放置示例 - 底部：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <头>
    <title>Bootstrap - Offcanvas</title>
    <元字符集=“UTF-8”>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </头>
  <正文>
    <div class="容器 mt-3">
		<h5 class="text-dark text-start">Offcanvas 放置 - 底部</h5>
    <p>调整视口大小以查看画布外</p>
		<div 类=“容器”>
			<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">底部offcanvas</button>
			<div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  			<div class="offcanvas-header text-bg-danger">
    		<h5 class="offcanvas-title" id="offcanvasBottomLabel">底部offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-danger-subtle">
				<p>这是一个放置在视口底部的关闭画布的示例。</p>
  			</div>
			</div>
		</div>
    </div>
  </正文>
</html>

无障碍

确保在.offcanvas中包含aria-labelledby="..."，引用 offcanvas 标题，因为 offcanvas 面板在概念上类似于模式对话框。值得注意的是，您不必添加role="dialog"，因为它是通过 JavaScript 自动添加的。