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>
全局CSS样式--插件 导航条
原文地址：https://www.cnblogs.com/kellysha/p/8443096.html