第二十六谈：导航栏

本节课我们来开始学习 Bootstrap 的提供导航栏组件功能。

一．导航栏

1. 导航栏是一种响应式的组件，主要使用.navbar-toggler 来实现；

      <nav class="navbar navbar-expand-md navbar-light bg-light">
          <span class="navbar-brand">Logo</span>
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbar">
              <ul class="navbar-nav">
                  <li class="nav-item active">
                      <a href="#" class="nav-link">首页</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">列表</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">图文</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">关于</a>
                  </li>
              </ul>
          </div>
      </nav>

2. 如果你不想使用 ul>li 这种方式实现导航列表，可以使用 div>a；

      <div class="collapse navbar-collapse" id="navbar">
          <div class="navbar-nav">
              <a href="#" class="nav-item nav-link active">首页</a>
              <a href="#" class="nav-item nav-link">列表</a>
              <a href="#" class="nav-item nav-link">图文</a>
              <a href="#" class="nav-item nav-link">关于</a>
          </div>
      </div>

3. 给导航栏增加一个查询的表单；

      <form action="" class="form-inline">
          <input type="text" class="form-control" placeholder="关键字">
          <button class="btn btn-outline-secondary ml-2">搜索</button>
      </form>

4. 如果你想给导航栏增加文本，使用.navbar-text；

      <span class="navbar-text">这里是文本！ </span>

5. 导航栏可以设置主题配色，主要修改.navbar-dark 和.bg-dark 两个样式；

      <nav class="navbar navbar-expand-md navbar-dark bg-dark">

6. 如果想要响应式的菜单按钮显示在左边，只要把 LOGO 移入隐藏切换区域即可；

      <div class="collapse navbar-collapse" id="navbar">
          <span class="navbar-brand">Logo</span>
              ...