Bootstrap5中的Offcanvas（侧边栏导航） 组件

Offcanvas 是一种侧边栏导航模式，它允许在屏幕边缘显示一个带有导航链接的面板，而不影响页面的主要内容。在 Bootstrap 5 中，Offcanvas 组件提供了一种简单的方法来创建这种侧边栏导航。

基本用法

要使用 Offcanvas，你需要创建一个包含导航链接的 HTML 结构，以及一个触发 Offcanvas 显示的元素（通常是一个按钮）。

HTML 结构示例：

<!-- Offcanvas trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas" aria-controls="myOffcanvas">
  Toggle Offcanvas
</button>

<!-- Offcanvas content -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="myOffcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</p>
  </div>
</div>

类名解释

• offcanvas: 应用到包含 Offcanvas 内容的元素上，表示这是一个 Offcanvas 组件。
• offcanvas-start: 表示 Offcanvas 从屏幕的左侧滑出。你也可以使用 offcanvas-end 来使 Offcanvas 从右侧滑出。
• offcanvas-header: 应用到 Offcanvas 的头部元素上，用于包含标题和关闭按钮。
• offcanvas-title: 应用到 Offcanvas 的标题元素上，用于显示标题文本。
• offcanvas-body: 应用到包含 Offcanvas 主要内容的元素上。
• btn-close: 应用到关闭按钮上，用于关闭 Offcanvas。

JavaScript 交互

Offcanvas 组件依赖于 Bootstrap 的 JavaScript 插件来提供交互功能。确保在页面中引入了 Bootstrap 的 JavaScript 文件。

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

总结

Bootstrap 5 中的 Offcanvas 提供了一种简单而优雅的方式来创建侧边栏导航。通过使用 HTML、CSS 和 Bootstrap 的 JavaScript 插件，你可以轻松地创建出具有吸引力和功能性的 Offcanvas 导航。无论是用于移动设备的导航，还是作为桌面设备的额外导航选项，Offcanvas 都是一个很好的选择。