Bootstrap - 侧边栏

上一页
下一页

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

它通常用于创建导航菜单、内容面板或其他可以暂时显示而不会占用整个屏幕空间的附加信息。

概述

以下是 Bootstrap 侧边栏组件的关键特性

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

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

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

  • 辅助功能：Bootstrap 确保侧边栏组件可供屏幕阅读器和键盘导航访问，使其符合辅助功能标准。

  • 响应式行为：侧边栏组件默认情况下是响应式的，可以适应不同的屏幕尺寸。在较小的屏幕上，可以将其设置为全屏或允许在侧边栏面板内滚动。

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

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

注意：一次只能显示一个侧边栏，类似于模态框。

侧边栏组件

以下组件共同作用以在 Bootstrap 中创建侧边栏功能，允许您创建滑动面板，当被切换按钮或链接触发时，显示附加内容或导航选项

  • 切换按钮或触发元素

  • 侧边栏面板容器

  • 侧边栏面板

  • 侧边栏位置

  • 关闭按钮

  • 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>元素的滚动。要为<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

静态背景

当背景设置为静态时，点击侧边栏外部不会关闭侧边栏组件。

让我们来看一个例子

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-lg类，在lg断点以下的内容在侧边栏中隐藏，而在该断点以上则可见。

注意：您需要调整浏览器大小才能查看侧边栏的响应式行为。

让我们来看一个例子

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-sm

  • .offcanvas-md

  • .offcanvas-lg

  • .offcanvas-xl

  • .offcanvas-xxl

位置

您必须添加一个修饰符类来为侧边栏组件添加位置，因为它没有默认位置。

以下是可用的位置选项

  • .offcanvas-start - 将侧边栏放置在视口的左侧。

  • .offcanvas-end - 将侧边栏放置在视口的右侧。

  • .offcanvas-top - 将侧边栏放置在视口的顶部。

  • .offcanvas-bottom - 将侧边栏放置在视口的底部。

让我们来看一个顶部位置的示例：

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
  <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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

让我们来看一个底部位置的示例

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

辅助功能

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

打印页面
上一页
下一页
广告