Bootstrap Nav

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

在标签页上使用导航需要依赖JavaScript标签页插件

确保导航组件的可访问性

如果使用导航组件实现导航条功能，务必在<ul>的最外侧的逻辑父元素上添加 role="navigation"属性，或者用一个<nav>包裹整个导航组件。不要将role属性添加到<ul>上，因为这样可以被辅助设备（残疾人用的）上识别唯一个真正的列表。

标签页

注：.nav-tabs类依赖 .nav基类

<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li> <!--role attribute -- An attribute to support the role classification of elements-->
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Message</a></li>
</ul>

胶囊式标签页（.nav-pills）

<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="#">Message</a></li>
</ul>

胶囊式标签页可以垂直方向堆叠排列。需添加( .nav-stacked)

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

两端对齐的标签页

在大于768px的屏幕上，通过.nav-justified类可以很容易的让标签页或胶囊式标签呈现出等宽度。在小屏幕上，导航链接呈现堆叠样式。

两端对齐的导航条导航链接已经被启用了

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Message</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Message</a></li>
</ul>

禁用的链接（.disabled）

只改变<a>的外观，不能改变功能。可以通过JavaScript禁用这个链接

添加下拉菜单

带下拉菜单的标签页

Accessible Rich Internet Applications(ARIA) defines ways to make Web content and Web application(especially those developed with Ajax and JavaScript) more accessible to people with disabilities.For
example,ARIA enables accessible navigation landmarks,JavaScript widgets,form hints and error message,live content updates,and more ..https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

<ul class="nav nav-pills">
<li class="active" role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Message <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
</ul>

导航条

导航条是在应用或网站中作为导航页头的响应式基础组件（移动设备上可折叠），且在视口(viewport)宽度增加时变为水平展开模式

两端对齐的导航条链接已经被弃用

导航条内包含元素溢出

a.减少导航条内所有元素所占据的宽度

b.在某些尺寸的屏幕上（利用响应式工具类）隐藏导航内的一些元素

c.修改导航条在水平排列和折叠列相互转换时，触发这些转化的最小屏幕宽度值。可以通过修改@grid-float-breakpoint变量实现，或者自己重写相关媒体查询代码，覆盖Bootstrap的默认值

依赖JavaScript

响应式导航条依赖collapse插件，定制Bootstrap的时候必将其包含

修改视口的阈值，从而影响导航的排列模式

当浏览器视口(viewport)的宽度小于@grid-float-breakfloat值时，导航条内部元素变为折叠排列，也就是变现为移动设备展开模式。通过调整源代码的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值768px。

导航条的可访问性

务必使用<nav>元素，或者，如果使用的通过<div>元素的话，务必为导航条设置为 role="navigation"属性，方便辅助设备的用户明确知道这是一个导航区域。

品牌图标

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<img src="01.png" alt="Brand" style="width: 30px;height: 30px">
</div>
</div>
</div>
</nav>表单
将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在教窄的视口(viewport)中呈现折叠状态。

注：某些表单组件，例如输入框组，可能需要设置一个固定宽度，从而在导航条内合适的展现。

sr-only --- screen reader only （仅供）屏幕阅读器，增强accessibly(可访问性)

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<input type="button" value="submit" class="btn btn-default">
</form>如果没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过添加.sr-only类隐藏label标签
button不推荐用在<a>元素内

固定顶部、底部

添加.navbar-fixed-top、navbar-fixed-bott
4000
om类可以让导航条固定在顶部，还包含一个.container 或 .container-fluid容器，从而让导航条居中，并且在两侧添加内部(padding)

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid"></div>
</nav>导航条默认高度50px，如果不想导航条遮住页面上面内容，需要给body元素设置内部padding值
静止在顶部
通过添加.navbar-static-top类可以创建一个与页面等宽度的导航条，它会随着页面向下滚而消失

<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 href="#" class="navbar-brand">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 role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</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-expanded="false" aria-haspopup="true">
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>
</div>
</nav>