Bootstrap 简明教程

Bootstrap - Offcanvas

本章讨论了侧边栏组件。Bootstrap 中的侧边栏组件是一个特性，允许您创建滑动面板或侧边栏，这些面板或侧边栏可以在视口的侧面显示或隐藏。

通常用于创建导航菜单、内容面板或其他信息，这些信息可以在不占用全屏空间的情况下暂时显示。

Overview

下面列出了 Bootstrap 侧边栏组件的主要功能：

  1. Activation ：侧边栏组件通常由一个切换按钮或一个触发侧边栏面板打开和关闭的链接激活。可以使用 JavaScript 或数据属性实现此目的。

  2. Placement ：侧边栏面板可以根据设计要求放置在视口的左侧、右侧、顶部或底部。

  3. Content ：您可以在侧边栏面板中放置任何 HTML 内容，包括导航菜单、文本、图像、表单或其他组件。

  4. Accessibility ：Bootstrap 确保侧边栏组件可被屏幕阅读器和键盘导航访问，使其符合无障碍标准。

  5. Responsive behavior ：侧边栏组件默认是响应式的，可适应不同的屏幕尺寸。在较小的屏幕上，可以使其全屏或允许在侧边栏面板内滚动。

  6. Events ：Bootstrap 提供了 JavaScript 事件，用于自定义侧边栏组件的行为，例如在面板打开或关闭时执行代码。

它简化了滑动面板的创建，并有助于改善移动设备上的用户体验，以干净高效的方式呈现其他内容或导航选项，而不会使主屏幕凌乱。

Note ：一次只能显示一个侧边栏，就像模态窗口一样。

Offcanvas components

以下组件协同工作以在 Bootstrap 中创造离屏功能，当你通过切换按钮或链接触发时，它能让你创建滑动面板来显示更多内容或导航选项：

  1. Toggle button or trigger element

  2. Offcanvas panel container

  3. Offcanvas panel

  4. Offcanvas placement

  5. Close button

  6. Javascript and data attributes

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Live demo

离屏组件会基于以下条件显示或隐藏：

  1. .offcanvas （默认） - 隐藏内容

  2. .offcanvas.show - 显示内容

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Body scrolling

当离屏及其背景可见时，禁止滚动 <body> 元素。要启用对 <body> 元素的滚动，你可以利用 data-bs-scroll 属性。

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 scrolling and backdrop

你可以启用可见背景下的 <body> 滚动。

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Static backdrop

在背景被设置为静态的情况下，点击屏幕关闭离屏时，离屏组件不会关闭。

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

Dark offcanvas

Responsive

响应式的离屏类，从指定断点及以下开始隐藏视口外部的内容。另一方面，内容在该断点以上表现正常。例如，通过 .offcanvas-lg 类，位于 lg 断点以下的内容被隐藏在离屏中，而其在该断点以上可见。

*注意:*你需要调整你的浏览器大小以查看离屏的响应行为。

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

响应式离屏的类可以在每个断点使用。

  1. .offcanvas

  2. .offcanvas-sm

  3. .offcanvas-md

  4. .offcanvas-lg

  5. .offcanvas-xl

  6. .offcanvas-xxl

Placement

你必须添加一个修改类才能给离屏组件一个位置，因为它的位置默认没有设置。

以下是可用位置选项：

  1. .offcanvas-start - 将离屏放置在视口左侧。

  2. .offcanvas-end - 将离屏放置在视口右侧。

  3. .offcanvas-top - 将离屏放置在视口顶部。

  4. .offcanvas-bottom - 将离屏放置在视口底部。Let us see an example for placement - top:: ==== Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

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

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 - Right</h4>
		<div class="container">
			<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right 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">Right 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>This is an example for an offcanvas whose placement is at the right of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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">
		<h5 class="text-dark text-start">Offcanvas placement - Bottom</h5>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom 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">Bottom 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>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

Accessibility

请务必在 .offcanvas 中包含 aria-labelledby="…​" ，指的是 Offcanvas 标题，因为 Offcanvas 面板在概念上类似于模态对话框。值得注意的是，您不必添加 role="dialog" ，因为它会通过 JavaScript 自动添加。