在 Bootstrap 5 中，侧边栏导航（Offcanvas） 是一种可以从页面边缘滑入的组件，通常用于在移动设备或小屏幕设备上显示导航菜单、搜索框或其他内容。它可以从左侧、右侧、顶部或底部滑出，并且支持关闭按钮或点击外部区域来关闭。

1. 创建一个基本的侧边栏导航（Offcanvas）

Bootstrap 5 提供了 offcanvas 类来创建侧边栏，并且通过 JavaScript 控制其显示和隐藏。

示例：基本的侧边栏导航

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Offcanvas Sidebar</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Offcanvas Trigger Button -->
  <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Open Sidebar
  </button>

  <!-- Offcanvas Sidebar -->
  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">Sidebar Title</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <ul class="list-unstyled">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>

  <!-- Bootstrap JS and Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>

</body>
</html>

2. 代码解析

  • data-bs-toggle="offcanvas"：这是触发侧边栏的按钮，点击后会显示侧边栏。
  • data-bs-target="#offcanvasExample"：指向你想要显示的 offcanvas 元素的 ID（在此例中是 #offcanvasExample）。
  • .offcanvas：这是侧边栏的基础类，表示一个侧边滑入的组件。
  • .offcanvas-start：设置侧边栏从屏幕的左边（start）滑入。如果你想从右边滑入，可以使用 .offcanvas-end。
  • .offcanvas-header 和 .offcanvas-body：分别表示侧边栏的头部和主体区域。
  • .btn-close：这是关闭按钮，点击它可以关闭侧边栏。

3. 自定义侧边栏位置

  • 从左侧滑入：使用 .offcanvas-start，这是默认的方向。
  • 从右侧滑入：使用 .offcanvas-end。

示例：从右侧滑入

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Sidebar Title</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-unstyled">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

4. 启用多个侧边栏

你可以在同一页面上启用多个侧边栏，分别控制它们的显示和隐藏。只需确保每个侧边栏的 ID 唯一，并为每个按钮指定对应的 data-bs-target。

示例：多个侧边栏

<!-- Button 1: Open Sidebar 1 -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" aria-controls="offcanvas1">
  Open Sidebar 1
</button>

<!-- Button 2: Open Sidebar 2 -->
<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2" aria-controls="offcanvas2">
  Open Sidebar 2
</button>

<!-- Offcanvas Sidebar 1 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1" aria-labelledby="offcanvas1Label">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas1Label">Sidebar 1</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</div>

<!-- Offcanvas Sidebar 2 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas2" aria-labelledby="offcanvas2Label">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas2Label">Sidebar 2</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul>
      <li><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
    </ul>
  </div>
</div>
  • 侧边栏 1 从 左侧（offcanvas-start）滑入。
  • 侧边栏 2 从 右侧（offcanvas-end）滑入。

5. 使用 JavaScript 控制侧边栏

通过 JavaScript，你可以动态地控制侧边栏的显示和隐藏。例如，你可以在页面加载后自动显示侧边栏，或者通过其他事件来触发它。

示例：使用 JavaScript 显示侧边栏

// 获取侧边栏元素
var myOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));

// 显示侧边栏
myOffcanvas.show();

// 隐藏侧边栏
myOffcanvas.hide();
  • myOffcanvas.show()：显示侧边栏。
  • myOffcanvas.hide()：隐藏侧边栏。

6. 自定义侧边栏内容和样式

你可以根据需要自定义侧边栏的内容、样式和行为。例如，可以添加图标、表单、动画效果等。

示例：自定义样式

<style>
  .offcanvas-body {
    background-color: #f8f9fa;
    color: #333;
  }

  .offcanvas-header {
    background-color: #007bff;
    color: white;
  }
</style>
  • .offcanvas-body：自定义背景色和字体颜色。
  • .offcanvas-header：设置头部的背景色。

总结

  • .offcanvas：这是创建侧边栏的基本类。
  • data-bs-toggle="offcanvas" 和 data-bs-target="#offcanvasExample"：按钮与侧边栏的连接，通过点击按钮触发侧边栏的显示。
  • .offcanvas-start 和 .offcanvas-end：控制侧边栏的滑入方向（左侧或右侧）。
  • myOffcanvas.show() 和 myOffcanvas.hide()：使用 JavaScript 控制侧边栏的显示和隐藏。

Bootstrap 5 的 Offcanvas 是一个非常灵活的组件，适用于许多常见的侧边栏需求，可以帮助你创建响应式、动态的侧边栏导航菜单。