第十四谈：导航和滑动门

本节课我们来开始学习 Bootstrap 的提供的导航和滑动门组件。

一．导航

1. 构建一个简单的 ul 导航列表，具体如下：

      <ul class="nav">
          <li class="nav-item">
              <a href="#" class="nav-link active">首页</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 disabled">关于</a>
          </li>
      </ul>

2. 测试发现，上面中.nav-item 和 active 暂时体现不出效果；
3. 更改成 nav 和 a，也可以实现相同的导航效果；

      <nav class="nav">
          <a href="#" class="nav-link active">首页</a>
          <a href="#" class="nav-link">内容</a>
          <a href="#" class="nav-link">项目</a>
          <a href="#" class="nav-link disabled">关于</a>
      </nav>

4. 使用.justify-content-between 实现导航的居中对齐，-end 右对齐；

      <nav class="nav justify-content-center">

5. 使用.flex-column 将导航垂直显示；

      <nav class="nav flex-column">

6. 使用.nav-tabs 实现标签选项卡；

      <ul class="nav nav-tabs">

7. 使用.nav-pills 实现按钮式选项卡；

      <ul class="nav nav-pills">

8. 使用.nav-fill 实现水平布局；

      <ul class="nav nav-pills nav-fill">

9. 当使用<nav>来实现以上效果时，此时需要.nav-item 来体现效果；

      <nav class="nav nav-pills nav-fill">
          <a href="#" class="nav-item nav-link active">首页</a>
          <a href="#" class="nav-item nav-item nav-link">内容</a>
          <a href="#" class="nav-item nav-link">项目</a>
          <a href="#" class="nav-item nav-link disabled">关于</a>
      </nav>

10. 等宽操作，使用.nav-justified，可以通过加上边框来体会区别；

      <nav class="nav nav-pills nav-justified">

二．滑动门

1. 滑动门效果，即采用 jQuery 和 Bootstrap.js 实现选项卡切换；

      <nav class="nav nav-tabs">
          <a href="#one" data-toggle="tab" class="nav-item nav-link active">首页</a>
          <a href="#two" data-toggle="tab" class="nav-item nav-link">内容</a>
          <a href="#three" data-toggle="tab" class="nav-item nav-link">项目</a>
      </nav>
      <div class="tab-content">
          <div id="one" class="tab-pane fade show active">内容 1...</div>
          <div id="two" class="tab-pane fade">内容 2...</div>
          <div id="three" class="tab-pane fade">内容 3...</div>
      </div>