Bootstrap5滑动导航组件：打造高效隐藏式侧边栏

2023-11-03 12:09:29

使用Bootstrap 5的滑动导航组件，可以轻松地构建一个可以从窗口边缘滑出的侧边栏，这在项目中非常有用，比如用于导航、购物车等。

以下是Bootstrap 5滑动导航组件的使用方法：

首先，需要在HTML页面中添加<nav>元素，并添加offcanvas和offcanvas-start类，后者表示侧边栏从窗口的左侧滑出。

<nav class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</nav>

然后，需要在HTML页面中添加一个按钮或链接，用于触发侧边栏的显示和隐藏。

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Launch offcanvas
</button>

最后，需要在JavaScript中添加如下代码：

var offcanvasExample = document.getElementById('offcanvasExample')
offcanvasExample.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

其中，offcanvasExample是侧边栏的ID，hidden.bs.offcanvas是侧边栏隐藏时的事件，do something...是需要在侧边栏隐藏时执行的代码。