响应式导航条，在不同屏幕大小显示的效果不同，先看一下效果
上面是在PC端显示的效果
上面的是在小屏幕上显示的效果
上面是当我们点击三横的时候，导航条上的文字出现了
看完效果我来总结一下用到的知识点：
总体上涉及到的知识点有导航条相关的和折叠相关的，响应式导航条依赖collapse
导航条相关知识：基类：navbar
logo：一般放在.navbar-brand之内（因为它已经被设置了内填充和高度），为了解决移动端上存在的小bug，一般将它放在另外一个标签中，如下
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
按钮：对于<button>元素，加上.navbar-btn后可以让它在导航条里垂直居中
固定在顶部：添加.navbar-fixed-top类可以让导航条固定在顶部，还可以包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加内填充
注意：需要为body元素设置内填充，因为这个固定的导航条会遮住页面上的其他内容，除非给body元素设置了padding-top
嗯、有必要说一下
是怎么实现的，倒不是因为它难，而是提醒我自己一下，别忘了。嗯、其实就是下面的代码喽，最主要的是用到了.icon-bar这个类啦
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
还有一个下拉菜单的功能，这个其实也不难，学过bootstrap的应该都会吧，这里我们重点不在它，所以就不在啰嗦了
其实响应式导航条最主要用到了折叠相关类collapse，因为有交互效果，所以data-属性肯定也是不可少的了
data-toggle：以collapse事件触发，
data-target：事件的目标，找到对应的id；
这里让菜单显示隐藏，主要用到的类是：collapse navbar-collapse
其实bootstrap中很多的用法都很相似，用法也就那么几种，看多了，用多了自然也就会了，所以我就不多说了，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式导航条</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body{ position:relative;}
</style>
</head>
<body>
<nav class="nav navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--在移动端的时候导航条折叠起来，三横的样式出现，点击该样式可以显示或隐藏导航条上的内容-->
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">logo</a>
</div>
<div id="menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<!--下拉菜单功能的实现-->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
three<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
