导航栏是一个很好的功能，是bootstrap网站一个突出的特点，导航栏在您的应用或网站中作为导航页头的响应式基础组件，导航栏在移动设备中的视图是堆叠的，随着可视窗口的宽度增大，导航栏也会随之水平展开。
默认的导航栏
创建一个默认的导航栏步骤如下：
1、向nav标签添加class.navbar,.navbar-default,然后再添加role="navigation",有助于增加可访问性。
2、向div元素添加一个标题class.navbar-header,内部包含了带有class.navbar-brand的a元素，这会让文本看起来大一号
3、向导航栏添加链接，您只需要简单的添加带有class.nav、.navbar-nav 的无序列表即可。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap历练实例：默认的导航栏</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">w3cschool<img src="Images/smiley.gif" class="navbar-nav" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
html5前端
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li class="divider"></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</ul>
</div>
</nav>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>