关于导航
首先说明一点，在Bootstrap中的导航组件都依赖于同一个.nav类，状态类是共用的，下面添加的nav样式都是基于 .nav的基类上添加的
1，导航样式
（1）在ul上添加样式
导航样式代码如下：
标签页：
.nav-tabs
标签页是下面这种效果：
胶囊式标签：
.nav-pills
胶囊式标签是下面这种效果
2,通过在后面添加类名为 class="stacked"可以实现标签页的垂直效果
3，通过添加class="nav-justified"可以实现响应式效果
当屏幕宽度大于768px的时候，标签可以实现水平效果此时所有的宽度相加等于屏幕的宽度，，当宽度小于768px的时候，标签则会发生重叠效果，每一个标签或者胶囊单独占一行
（2）我们对于li元素上添加的效果
1，实现禁用的链接
通过在相应的li选项上添加 .disabled类来实现
代码如下：
- ......
- disabled link ......
2，在选项中添加下拉菜单选项只要应用到 li元素的选项上添加dropdown下拉class就可以了
代码如下：
效果如上图所示
胶囊式的下拉菜单和标签只要将
class="nav nav-tabs"换为 class="nav nav-pills"就可以了
二：关于导航条
（1）导航条的样式问题：
实现一个简单的导航条（navbar）：
与普通的标签相比，这个元素呈现出的导航栏呈现一个条状的特征
如果需要使用导航组件实现导航条功能，需要在ul外侧的逻辑父元素上添加role="navigation"属性，或者用一个<nav>元素
代码如下：
效果如下：
当屏幕缩小的时候，就变成了下面这幅图的样子：
(2)带有标题的菜单，通过在导航条最外面的元素内添加 class="navbar-header" 和 class="navbar-brand"来实现的
代码如下：
需要添加的内容：
我们通过为菜单栏添加标题得到的效果如下:
(2)关于二级菜单
我们是如何实现二级菜单的呢？
二级菜单是下面的这种效果：
如何实现,其实很简单，我们只要在导航条内添加下拉菜单的按钮就可以了
代码如下：
并且当我们屏幕缩小的时候会出现下面的效果：
（3）对于导航栏元素的各种操作样式
1》》对于导航条中的<button>元素，我们通过为<button>元素添加class为 .navbar-btn后可以实现在导航条中垂直居中的效果
效果如下：
使用 .navbar-btn 可以用在<a>和 <input>元素内，但是在 .navbar-nav内，.navbar-btn不应该用在<a>元素上
2》》对于导航条内的文本，我们想让导航条内的文本出现垂直居中的效果，只要在要居中的元素内加上 class="navbar-text"
3》》使用 .navbar-left 和 .navbar-right来实现导航链接，表单，按钮或者文本在导航条内的对齐
4》》通过添加 .navbar-fixed-top可以实现将导航条固定在顶部,
通过添加 .navbar-fixed-bottom可以实现将导航条固定在底部
通过添加.navbar-static-top类可以实现创建一个与页面等宽度的导航条，会随着页面向下滚动而消失
5》》通过添加 .navbar-inverse可以改变导航条的外观
效果如下：
6》》面包屑布局：
我们要显示当前的位置应该如何显示呢？
例如我们要实现下面的效果：
代码如下：
给总体的元素添加一个class为 breadcrumb的class,后面跟上 <li>元素用来实现面包屑
我们观察bootstrap源码我们可以知道这个是如何实现的：
.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px;}.breadcrumb > li { display: inline-block;}.breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "/\00a0";}.breadcrumb > .active { color: #777;} 我们看到，这个是对于class为 breadcrumb的元素下的li元素添加一个 "/"来实现的 通过 before {content来实现的}
并且对于添加了class为 active 的元素使用 color:#777改变了颜色，这个应该应用到当前所在的位置