1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no"/> 7 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> 8 <title></title> 9 <style></style> 10 </head> 11 <body> 13 <!--导航条 包含容器，而不是容器包含导航条-> 14 <div class="navbar navbar-default"> 15 <div> 16 <!--第一部分--> 17 <a href="" class="navbar-brand"> 18 <img src="img/Jellyfish.jpg" style="width:25px"/> 19 </a> 20 <div class="navbar-header"> 21 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navdown" type="button"> 22 <span class="icon-bar"></span> 23 <span class="icon-bar"></span> 24 <span class="icon-bar"></span> 25 </button> 26 </div> 27 <!--第二部分--> 28 <div id="navdown" class="collapse navbar-collapse"> 29 <ul class="nav navbar-nav"> 30 <li><a href="">首页</a></li> 31 <li><a href="">新闻</a></li> 32 <li class="dropdown"> 33 <a href="" data-toggle="dropdown"> 34 产品大全<span class="caret"></span> 35 </a> 36 <ul class="dropdown-menu"> 37 <li><a href="">修手机</a></li> 38 <li><a href="">贴膜</a></li> 39 <li><a href="">代驾</a></li> 40 </ul> 41 </li> 42 <li><a href="">招聘</a></li> 43 <li><a href="">帮助</a></li> 44 </ul> 45 <!--第三部分--> 46 <a href="" class="navbar-right navbar-link navbar-text" style="margin-right:5px;">登录</a> 47 <span class="navbar-right navbar-text">|</span> 48 <a href="" class="navbar-right navbar-link navbar-text">注册</a> 49 <!--导航中表单--> 50 <form action="" class="navbar-right navbar-form"> 51 <div class=" input-group"> 52 <input type="text" id="kw" class="form-control"/> 53 <div class="input-group-addon"> 54 <span class="glyphicon glyphicon-search "></span> 55 </div> 56 </div> 57 </form> 58 </div> 59 </div> 60 </div> 61 <script src="js/jquery.js"></script> 62 <script src="js/bootlint.js"></script> 63 <script src="js/bootstrap.js"></script> 64 <script> 65 bootlint.showLintReportForCurrentDocument([]); 66 </script> 67 68 </body> 69 </html>
原文地址：https://www.cnblogs.com/kellysha/p/8443096.html
时间： 2024-10-31 01:34:58