导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
### 默认的导航栏
1、向 <nav> 标签添加 class **.navbar、.navbar-default**。
2、向上面的元素添加 **role="navigation"**，有助于增加可访问性。
3、向 <div> 元素添加一个标题 class **.navbar-header**，内部包含了带有 class **navbar-brand** 的 < a > 元素。这会让文本看起来更大
一号
4、为了向导航栏添加链接，只需要简单地添加带有 class **.nav、.navbar-nav** 的无序列表即可。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>demo</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">html+css学习</a></li>
<li><a href="#">javascript学习</a></li>
<li><a href="#">jquery学习</a></li>
<li class="divider"></li>
<li><a href="#">bootstrap学习</a></li>
<li><a href="#">less/sass学习</a></li>
<li><a href="#">angularJS学习</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
~~~
### 响应式的导航栏
1、将要折叠的内容包含在带有class .collapse和.navbar-collspae的<div>中。
2、折叠起来的导航栏是带有class .navbar-toggle以及data-toggle和data-target两个属性的按钮，data-toggle用于告诉javascript
需要对按钮做什么，此处是折叠：collapse，data-target用于指示折叠哪个元素，此处是1中的导航菜单，data-target的属性值是要
指定的元素的id。
3、button中使用带有class .icon-bar的<span>创建所谓的汉堡按钮（就是按钮中多了几个横线）
~~~
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle = "collapse" data-target = "#target-menu">
<span class="sr-only">qieh</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">hello</a>
</div>
<div class="collapse navbar-collapse" id = "target-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">html+css学习</a></li>
<li><a href="#">javascript学习</a></li>
<li><a href="#">jquery学习</a></li>
<pre name="code" class="html"> <li class="divider"></li>
<li><a href="#">bootstrap学习</a></li>
<li><a href="#">less/sass学习</a></li>
<li><a href="#">angularJS学习</a></li>
</ul> </li> </ul> </div> </nav></body>
~~~
当屏幕的宽度大于等于768px时，显示与默认的导航栏相同，而屏幕宽度小于768px时，显示效果如下：
注意:data-target的属性值其实是： #+id，如果只写成id，点击折叠按钮是没有任何反应的，另外，需要引入折叠插件，或者因为
bootstrap.min.js和jquery.js
### 导航栏中的表单
导航中的form表单，需要使用class navbar-form，这确保了表单垂直对齐和在较窄的视口中的折叠行为。使用对齐方式选型来决定
导航栏的内容放置在哪里，此处使用了navbar-right，居于右侧（如果使用navbar-left那么就会居于左侧，默认是左侧）。
~~~
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>
</body>
~~~
### 导航栏中的按钮
不在 <form> 中的 <button>或者a 元素。通过添加class **.navbar-btn**，使得按钮在导航栏上垂直居中
~~~
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<button type="button" class="btn btn-primary navbar-btn">button按钮</button>
<a href = "#" class="btn btn-warning navbar-btn">链接按钮</a>
</div>
</nav>
</body>
~~~
### 导航栏中的文本
使用 class **.navbar-text，**确保适当的前导和颜色。
~~~
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<p class="navbar-text">导航栏中文字
<a href="#" class="navbar-link">链接</a>
</p>
</div>
</nav>
</body>
~~~
### 非导航链接
使用 class **navbar-link** 为默认的和倒转的导航栏选项添加适当的颜色，因为默认的a标签的样式可能与导航栏的样式不协调
~~~
<body>
<nav class = "navbar navbar-default navbar-inverse" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<p class="navbar-text">导航栏中文字
<a href="#" class="navbar-link">链接</a>
</p>
</div>
</nav>
<div style="background-color:#CCCCCC;height:1000px;">
</div>
<div style="background-color:#BFFF70;height:200px;">
</div>
</body>
~~~
### 固定到顶部
如果想要让导航栏固定在页面的顶部，向 **.navbar class** 添加 class **.navbar-fixed-top。**为了防止导航栏与页面主体中的其他内容
的顶部相交错，需要向 <body> 标签添加内边距，内边距的值至少是导航栏的高度。
~~~
<body>
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<p class="navbar-text">导航栏中文字
<a href="#" class="navbar-link">链接</a>
</p>
</div>
</nav>
<div style="background-color:#CCCCCC;height:1000px;">
</div>
<div style="background-color:#BFFF70;height:200px;">
</div>
</body>
~~~
为了能够看出效果，此处添加了两个有背景色的div。
固定到底部，只需要把class .navbar-fixed-top换成.navbar-fixed-bottom即可，不需要在body中添加内边距。
对于给nav添加 **.navbar-static-top** class，实在是没有看出有什么作用，开始以为是能够创建一个浮动的导航条的。
### 反色的导航栏
向 **.navbar** class 添加 **.navbar-inverse** class，创建一个带有黑色背景白色文本的导航栏
~~~
<body>
<nav class = "navbar navbar-default navbar-inverse" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand">hello</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">网站首页</a></li>
<li><a href="#">JS开发</a></li>
<li><a href="#">html</a></li>
<li><a href="#">jquery</a></li>
</ul>
<p class="navbar-text">导航栏中文字
<a href="#" class="navbar-link">链接</a>
</p>
</div>
</nav>
<div style="background-color:#CCCCCC;height:1000px;">
</div>
<div style="background-color:#BFFF70;height:200px;">
</div>
</body>
~~~
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解