Bootstrap之响应式导航栏
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link href="../css/bootstrap.css" rel="stylesheet"> 7 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 8 <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> 9 10 <title>Bootstrap 响应式导航栏</title> 11 </head> 12 <body> 13 <div class="container"> 14 <nav class="navbar navbar-inverse"> 15 <div class="navbar-header"> 16 <a href="#" class="navbar-brand"><strong>demo</strong>.com</a> 17 <button class="navbar-toggle" data-toggle="collapse" data-target="#nav1"> 18 <span class="icon-bar"></span> 19 <span class="icon-bar"></span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 </button> 23 </div> 24 <div id="nav1" class="collapse navbar-collapse"> 25 <ul class="nav navbar-nav"> 26 <li class="active"><a href="#">首页</a></li> 27 <li><a href="#">相册</a></li> 28 <li><a href="#">说说</a></li> 29 <li><a href="#">个人中心</a></li> 30 </ul> 31 32 <form action="" class="navbar-form navbar-right"> 33 <input type="text" placeholder="搜索" class="form-control"> 34 <input type="button" value="搜索" class="form-control"> 35 </form> 36 37 <a href="#" class="navbar-btn btn btn-sm btn-primary navbar-right">登陆</a> 38 <a href="#" class="navbar-btn btn btn-sm btn-primary navbar-right">注册</a> 39 </div> 40 </nav> 41 42 </div> 43 44 </body> 45 </html>
截图：
