Bootstrap 侧导航

Bootstrap侧导航，也称为Bootstrap的侧面导航栏或offcanvas menu，是一种响应式设计布局，常用于移动设备优化的网站，它会在屏幕宽度变窄时隐藏主要内容，展示一个滑动或折叠式的侧边栏菜单。在Bootstrap框架中，你可以使用`<nav>`标签配合`collapse`插件或`Navbar`组件来实现这一功能。

基本的侧边栏导航结构通常是这样的：

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <!-- 更多链接 -->
    </ul>
  </div>
</nav>

通过CSS媒体查询和JavaScript事件监听，可以轻松地调整侧边栏在不同设备尺寸下的显示和关闭行为。