bootstrap是现在比较流行的前端响应式开发框架，给我们这些爱偷懒的人，提供了很大的帮忙，同时，也给很多小公司节约了成本。
之前写过bootstrap model弹出框的使用 和 bootstrap tab的使用，今天就来写下navbar 导航条的使用吧。
废话不多说，先说正题。
bootstrap 导航条，其实也是一个组件。
效果图：
我们可以这样用：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
解释：
1.
<meta name="viewport" content="width=device-width, initial-scale=1">
这句话是响应式布局的关键。让宽度自动适应设备宽度，并让1:1缩放。
2.
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
这是低于ie9浏览器的一个响应式跟HTML5的脚本引用。
3.引入相应的css+js文件。js放在下面，这是一种前端性能优化方式。
4.复制官网的模板就可以自己做实验了。
bootstrap导航条主要要记住下面几个重要css样式：
navbar ：引用navbar类，标识使用navbar控件
navbar-fixed-top ：固定navbar控件在页头。如新浪的头部，不会随滚动条滚动而滚动。当然，记得要给body加个padding-top：70px;的属性，这样才不会遮到内容 。
navbar-inverse：深黑色主题，你可以尝试用其他主题，如navbar-default
container:用在做居中对齐。
web开发分享
声明: 本文由( zongyan86 )原创编译，转载请保留链接: bootstrap navbar导航条的使用
