1，利用bootstrap来实现响应式的导航条
bootstrap中的导航组件都依赖同一个.nav类，状态类也是共用的。
要实现一个导航条在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
导航条内所包含元素溢出
由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：
- 减少导航条内所有元素所占据的宽度。
- 在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
- 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改
@grid-float-breakpoint变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。
2，bootstrap的实现依赖javascript插件
如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见。
响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。
一，bootstrap设置的是当屏幕宽度小于768px时，导航条变为折叠排列。
当屏幕小于768px时，此时的css样式为：
.navbar-default .navbar-collapse { border-color: #e7e7e7; } .container>.navbar-collapse { margin-right: -15px; margin-left: -15px; } .navbar-fixed-top .navbar-collapse { max-height: 340px; }
.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .collapse { display: none; }
折叠按钮的样式：
.navbar-default .navbar-toggle { border-color: #ddd; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; }
当屏幕大小大于768px时，导航条平铺。此时css清单为：
.navbar-default .navbar-collapse { border-color: #e7e7e7; } @media (min- 768px) .container>.navbar-collapse { margin-right: 0; margin-left: 0; } @media (min- 768px) .navbar-fixed-top .navbar-collapse { padding-right: 0; padding-left: 0; } @media (min- 768px) .navbar-collapse.collapse { display: block!important; height: auto!important; padding-bottom: 0; overflow: visible!important; } @media (min- 768px) .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-fixed-top .navbar-collapse { max-height: 340px; }
折叠按钮的样式：
.navbar-default .navbar-toggle { border-color: #ddd; } @media (min- 768px) .navbar-toggle { display: none; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; }
完整的一个导航栏源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式导航条</title> <link href="assets/css/bootstrap.min.css" rel="stylesheet"/> <link href="assets/css/bootstrap-theme.css" rel="stylesheet"/> <style> .main{ background-color: #2aabd2; height: 1200px; } </style> </head> <body> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--左侧logo区域--> <div class="navbar-header"> <!--通过给折叠按钮加上data-target属性来实现与导航条相关--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#"> Brand </a> </div> <!--右侧导航区域--><!---主要是为导航加上.collapse 和.nav-collapse类，实现导航条的折叠效果--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">首页</a></li> <li class=""><a href="#">产品中心</a></li> <li class=""><a href="#">新闻中心</a></li> <li class=""><a href="#">数据下载</a></li> <li class=""><a href="#">监控平台</a></li> <li class=""><a href="#">联系我们</a></li> </ul> </div> </div> </nav> </header> <section class="main"></section> </body> <script src="assets/js/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/vendor/bootstrap.min.js"></script> </html>