使用Boostrap制作导航栏和汉堡按钮

导航栏制作

使用Boostrap制作基础导航栏主要分为以下步骤：
1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。
2.添加一个<div>标签或者一个容器<nav>,使用.navbar类和.navbar-default类，并添加role=“navigation”（增加可访问性）。
3.在上面的标签或容器内再添加一个div标签，使用.navbar-header类，内部包含带有.navbar-brand类的<a>标签，可用来定义品牌Logo，当然也可以写文字的。
4.也是在第二步的容器或者标签内添加带有.nav类、.navbar-nav类的无序列表即可。
虽然步骤看起来比较繁琐，但看代码理解一下就会啦：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>汉堡菜单</title><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css">
</head>
<body><div class="navbar navbar-default" role="navigation"><div class="navbar-header">  <a href="#" class="navbar-brand">网页首页</a></div><ul class="navbar-nav nav"><li class="active"><a href="#">名师指教</a></li><li><a href="#">教程报名</a></li><li><a href="#">联系我们</a></li><li><a href="#">精彩回顾</a></li></ul></div><script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script><script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

效果图如下：

当页面缩小的一定程度时，导航栏会竖直排布，是不是很智能呢，这就是我们的响应式啦。

汉堡按钮制作

当我们用手机浏览网页时，有时候会看到一个汉堡模样的按钮，当按一下时，隐藏的菜单会出现，再按时又会隐藏，这就是传说中的菜单折叠和隐藏效果。

实现菜单折叠效果如下步骤：
1.把小屏幕显示时需要折叠的内容包裹在一个div标签内，并且为这个div标签使用
.collapse和.navbar-collapse两个类，最后为这个标签添加一个id。
2.当小屏幕时，要显示的汉堡按钮的固定写法如下：

 <button class="navbar-toggle" type="button" data-toggle="collapse" ><span class="sr-only">汉堡按钮</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

完整代码如下：

<body><div class="navbar navbar-default" role="navigation"><div class="navbar-header">  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#kaiguan"><span class="sr-only">汉堡按钮</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">网页首页</a></div><div class="navbar-collapse collapse" id="kaiguan"><ul class="navbar-nav nav"><li class="active"><a href="#">名师指教</a></li><li><a href="#">教程报名</a></li><li><a href="#">联系我们</a></li><li><a href="#">精彩回顾</a></li></ul></div></div><script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script><script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>

button标签的data-target="#id"中的id对应的是要折叠部门的div标签内的id。建议读者多实践，并特意去掉某个类名，然后对比效果，观察这个类在代码中的作用，这样印象才更深刻。