Bootstrap导航栏及侧边栏使用技巧(针对手机端)

在我们写响应式页面时,基本都会选择**bootstrap**框架,但单纯使用boot框架难免还是有些场景难于实现,这时我们可以选择在vue中引入boot文件,不过这种方法不够优雅,而且需要全部引入

这里我们可以选择使用[bootstrap-vue](https://bootstrap-vue.org/)组件库.

在使用Navbar时,手机端如下,点击按钮会从上部弹出隐藏框,但有时项目经理要求从侧边弹出,这是只靠navbar是无法完成的,这时就需要sidebar侧边栏结合使用,

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

结合代码如下

`

    <b-navbar-toggle target="nav-collapse" class="btns">
      <b-button v-b-toggle.sidebar>1</b-button>
    </b-navbar-toggle>
    <b-sidebar
     id="sidebar"
      title="Sidebar"
      backdrop
      bg-variant="white"
       shadow>
      <router-link to="/home">首页</router-link>
      <router-link to="/song">送达流程</router-link>
      <router-link to="/wenti">常见问题</router-link>
      <router-link to="/emailto">邮件送达</router-link>
    </b-sidebar>

    <b-collapse id="nav-collapse1" is-nav>
      <b-navbar-nav>
        <b-nav-item to="/home">首页</b-nav-item>
        <b-nav-item to="/song">送达流程</b-nav-item>
        <b-nav-item to="/wenti">常见问题</b-nav-item>
        <b-nav-item to="/emailto">邮件送达</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>`

效果如下,如果不加 **backdrop ** 属性点击空白处无法关闭(虽然官方说该功能为添加背景色),