bootstrap--导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
(1)标签页

<ul class="nav nav-tabs">  <li role="presentation" class="active"><a href="#">Home</a></li>  <li role="presentation"><a href="#">Profile</a></li>  <li role="presentation"><a href="#">Messages</a></li></ul>

（2）胶囊式标签页

<ul class="nav nav-pills">  <li role="presentation" class="active"><a href="#">Home</a></li>  <li role="presentation"><a href="#">Profile</a></li>  <li role="presentation"><a href="#">Messages</a></li></ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
（3）禁用的链接
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

导航条

<nav class="navbar navbar-default">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>        <li><a href="#">Link</a></li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">One more separated link</a></li>          </ul>        </li>      </ul>      <form class="navbar-form navbar-left" role="search">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        </div>        <button type="submit" class="btn btn-default">Submit</button>      </form>      //导航靠右      <ul class="nav navbar-nav navbar-right">        <li><a href="#">Link</a></li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>          </ul>        </li>      </ul>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav>

品牌图标
将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

<nav class="navbar navbar-default">  <div class="container-fluid">    <div class="navbar-header">      <a class="navbar-brand" href="#">        <img alt="Brand" src="...">      </a>    </div>  </div></nav>

反色的导航条
通过添加 .navbar-inverse 类可以改变导航条的外观。

固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
固定在底部
添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
固定的导航条会遮住页面上的其它内容，则必须给body元素设置内补（padding）。

静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与.navbar-fixed-* 类不同的是，不用给 body 添加任何内补（padding）。