<!DOCTYPE html> <html lang="en"> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap Demo1</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container" style="padding:0 20px;"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Bokebi</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">冠体</a></li> <li><a href="#">需求</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">发布冠体<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">冠体1</a></li> <li><a href="#">冠体2</a></li> <li><a href="#">冠体3</a></li> <li><a href="#">冠体4</a></li> <!--<li class="divider"></li>--> </ul> </li> <li><a href="#">发布需求</a></li> </ul> <form class="form-search navbar-form pull-right" action=""> <input class="form-search" placeholder="搜索产品..." type="text" name="" id=""> <button class="btn btn-danger">搜索</button> </form> </div> </div> </div> </div> </body> </html>
预览效果截图
屏幕缩放后效果
屏幕缩放后展开导航效果
值得注意的地方：
1.<Meta name="viewport" content="width=device-width,initial-scale=1.0">,手机移动端必写，这里就不做解释了
2.bootstrap中css、js的引用，这里我要强调的是引用的顺序
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script>先引用bootstrap.css，再引用 bootstrap-responsive.css，最后引用自己写的css文件，js是先引用jquery的库文件，然后引用bootstrap的库文件
顺序很重要，之前写这些，没注意顺序，响应式效果半天出不来，有点小郁闷，所以就写下这篇博客，提醒自己，记录自己在学习中遇到的问题。
