Bootstrap5 侧边栏导航(Offcanvas)

Bootstrap5 是一款流行的前端开发框架，提供了一系列易于使用的组件和工具，使开发人员能够快速地构建现代化、响应式的网站和应用程序。其中包括 Offcanvas 组件，可以轻松地创建一个漂亮的侧边栏导航菜单。

开始使用

要使用 Bootstrap5 的 Offcanvas 组件，首先需要引入 Bootstrap 的 CSS 和 JS 文件，并在 HTML 文件中添加 Offcanvas 的 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Offcanvas Example</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  
  <!-- Offcanvas HTML Code -->
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Toggle Offcanvas
  </button>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</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 ps-0">
        <li class="mb-1">
          <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
            Home
          </button>
          <div class="collapse" id="home-collapse">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#" class="link-dark rounded">Overview</a></li>
              <li><a href="#" class="link-dark rounded">Updates</a></li>
              <li><a href="#" class="link-dark rounded">Reports</a></li>
            </ul>
          </div>
        </li>
        <li class="mb-1">
          <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
            Dashboard
          </button>
          <div class="collapse" id="dashboard-collapse">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#" class="link-dark rounded">Overview</a></li>
              <li><a href="#" class="link-dark rounded">Weekly</a></li>
              <li><a href="#" class="link-dark rounded">Monthly</a></li>
              <li><a href="#" class="link-dark rounded">Annually</a></li>
            </ul>
          </div>
        </li>
        <li class="mb-1"><button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">Orders</button>
          <div class="collapse" id="orders-collapse">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#" class="link-dark rounded">New</a></li>
              <li><a href="#" class="link-dark rounded">Processing</a></li>
              <li><a href="#" class="link-dark rounded">Shipped</a></li>
              <li><a href="#" class="link-dark rounded">Returned</a></li>
            </ul>
          </div>
        </li>
        <li class="border-top my-3"></li>
        <li class="mb-1">
          <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
            Account
          </button>
          <div class="collapse" id="account-collapse">
            <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
              <li><a href="#" class="link-dark rounded">Profile</a></li>
              <li><a href="#" class="link-dark rounded">Settings</a></li>
              <li><a href="#" class="link-dark rounded">Sign out</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

属性解释

Offcanvas 组件的 HTML 代码包括了多个属性，下面是对其中一些重要属性的解释：

data-bs-toggle：指定了 Offcanvas 组件的触发方式。在本例中，使用 data-bs-toggle="offcanvas" 指定了点击按钮触发 Offcanvas。
data-bs-target：指定了 Offcanvas 组件的目标元素。在本例中，使用 data-bs-target="#offcanvasExample" 来定义了目标元素的 ID。
tabindex：指定了 Offcanvas 组件的 tab 导航顺序，是一个可选的属性。在本例中，将 Offcanvas 的 tab 导航顺序设置为 -1，表示该元素不在 tab 导航顺序中出现。
aria-labelledby：定义了 Offcanvas 组件的标题 ID。在本例中，与 aria-labelledby 属性相关联的元素为 offcanvas-title。

样式与布局

在 Offcanvas 组件中，使用了多个 Bootstrap5 的样式类来定义布局和样式，下面是其中一些类的解释：

.offcanvas：Offcanvas 组件的容器。
.offcanvas-start：Offcanvas 组件的出现位置。offcanvas-start 表示组件出现在左侧，offcanvas-end 表示组件出现在右侧。
.offcanvas-header：Offcanvas 组件的头部。
.offcanvas-title：Offcanvas 组件的标题。
.offcanvas-body：Offcanvas 组件的内容区域。
.btn-toggle：Offcanvas 内容区域中的按钮。
.btn-toggle-nav：Offcanvas 内容区域中的链接。

结语

通过以上内容，可以学习如何使用 Bootstrap5 的 Offcanvas 组件创建一个漂亮的侧边栏导航菜单，包括 HTML 代码、属性解释、样式与布局等方面。借助 Bootstrap5 的帮助，前端开发人员可以更方便地创建出现代化、响应式的网站和应用程序。

Bootstrap5 下拉菜单 Bootstrap5 信息提示框