bootstrap 左侧竖导航栏

Bootstrap左侧竖导航栏通常被称为"Offcanvas Menu" 或 "Push Menu"，它是一种常见的响应式设计模式，用于创建移动端友好的网站布局。在Bootstrap框架中，你可以使用`navbar`组件结合`collapse`插件来实现这样的效果。以下是基本步骤：

1. 首先，在HTML中设置基础的`<nav>`元素作为导航栏，并添加`.navbar-inverse`类使其背景颜色更暗一些，如：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- 导航链接 -->
  </div>
</nav>

2. 使用`<ul>`和`<li>`创建导航菜单，将其放在`<div id="offcanvas">`或`.sidenav`容器内，以便于推入或推出屏幕外：

<div id="offcanvas" class="sidenav">
  <ul class="nav nav-pills nav-stacked">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <!-- 更多菜单项 -->
  </ul>
</div>

3. 使用JavaScript和jQuery，配合Bootstrap的`collapse`功能，通过按钮触发导航栏展开或折叠：

<button type="button" class="btn btn-primary pull-right toggle-offcanvas" data-toggle="collapse" data-target="#offcanvas">
  <span class="sr-only">Toggle navigation</span>
  <i class="fa fa-bars"></i> Navigation
</button>

<script>
$(document).ready(function() {
  // 初始化导航栏
  $('.toggle-offcanvas').click(function() {
    $('#offcanvas').toggleClass('collapsed');
  });
});
</script>