本篇介绍将剖析和介绍导航的详细使用方法

导航

导航类-介绍

• 导航组件都依赖同一个.nav类，状态类也是共用的，使用修饰类可以改变样式

• 导航需要js插件元素支持(如标签分页组件)

• .nav 导航基类

• .nav-tabs 标签页

• .nav-pills 胶囊式标签页

• .nav-stacked 垂直方向堆叠排列

• <ul>、<li> 导航内容载体代码结构

创建标签页

• 使用修饰类：.nav-tabs类

<div class="container">
    <p>创建标签页</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">最新动态</a></li>
        <li><a href="#">通知公告</a></li>
    </ul></div>

创建胶囊式标签页

• 使用修饰类：.nav-pills类

  <div class="container">
    <p>创建胶囊式标签页</p>
    <ul class="nav nav-pills"><!-- <ul class="nav nav-pills nav-stacked"> -->
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">最新动态</a></li>
      <li><a href="#">通知公告</a></li>
    </ul>
  </div>

垂直方向堆叠排列

• 使用修饰类：.nav-stacked类

  <div class="container">
    <p>创建胶囊式标签页-垂直堆叠排列</p>
    <ul class="nav nav-pills nav-stacked">
        ......    </ul>
  </div>

禁用效果

• 使用修饰类：.disabled类，注意此类在<a>元素上只有效果，不会禁用href属性，需要通过javascript修改DOM结构

• 可在<li>使用.disabled类

创建包含下拉菜单的标签页

• 通过嵌套方法实现

• <li>中使用dropdown类包裹下拉菜单

<div class="container"><p>创建包含下拉菜单的标签页</p>
    <ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">最新动态</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
        通知公告<span class="caret"></span>
        </a> 
        <ul class="dropdown-menu">
            <li><a href="#">网络通知</a></li>
            <li><a href="#">本周重点</a></li>
            <li><a href="#">维修计划</a></li>
            <li class="divider"></li>
            <li><a href="#">项目公告</a></li>
            </ul>
    </li>
    </ul></div>

创建包含下拉菜单的胶囊式标签页

• 方法与“包含下拉菜单的标签页”相同

• 使用修饰类：.nav-pills

<div class="container"><p>创建包含下拉菜单的胶囊式标签页</p>
    <ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">最新动态</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
        通知公告<span class="caret"></span>
        </a> 
        <ul class="dropdown-menu">
            <li><a href="#">网络通知</a></li>
            <li><a href="#">本周重点</a></li>
            <li><a href="#">维修计划</a></li>
            <li class="divider"></li>
            <li><a href="#">项目公告</a></li>
            </ul>
    </li>
    </ul></div>

本篇总结

• 导航的使用与输入框组类相比要简单太多，<ul>、<li>元素作为导航修饰类的截体

• 修饰类直接使用即可

• 如果怕自己记不住，请大家看看我给大家总结的一个类引用结构（依赖），通过这个引用顺序很容易就能掌握导航的使用方法

• .nav

• .nav-tabs

• .nav-pills

• <ul>、<li> 导航内容载体代码结构

• .nav-stacked

Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

写写本篇的题外话，《华为前端全栈成长计划》第三阶段已经结束，经过三期课程三个月的洗礼，技术分享文章写了二十多篇吧，质量上层次不齐谈不上好坏，但这通过写技术博客经常总结知识点的习惯算是养成了，gitee和markdown也玩的更熟练了，收获那是相当的大呀。

学习班虽然结束了但是技术博客仍然要坚持更新，书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.9.27 at home