基于Bootstrap实现下图所示效果的页面，一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条

 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 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"> 7 <title>导航条</title> 8 <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 9 10 </head>11 12 <body>13 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">14  <div class="container">15   <div class="navbar-header">16    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">17     <span class="sr-only"></span>18     <span class="icon-bar"></span>19     <span class="icon-bar"></span>20     <span class="icon-bar"></span>21    </button>22    <a href="" class="navbar-brand">某管理系统</a>23   </div>24 25   <div class="collapase navbar-collapse" id="menu">26    <ul class="nav navbar-nav">27     <li class="active"><a href="#">首页</a></li>28     <li class="dropdown">29      <a href="#" data-toggle="dropdown" role="button">30       功能31       <span class="caret"></span>32      </a>33      <ul class="dropdown-menu">34       <li class="dropdown-header">业务功能</li>35       <li><a href="#">信息建立</a></li>36       <li><a href="#">信息查询</a></li>37       <li><a href="#">信息管理</a></li>38       <li role="separetor" class="divider"></li>39       <li class="dropdown-header">系统功能</li>40       <li><a href="#">设置</a></li>41      </ul>42     </li>43     <li><a href="#">帮助</a></li>44    </ul>45    <form class="navbar-form navbar-right">46     <div class="form-group">47      <input type="text" class="form-control" placeholder="username">48      <input type="text" class="form-control" placeholder="password">49      <button type="button" class="btn btn-default">登录</button>50     </div>51    </form>52   </div>53  </div>54 </nav>55 56 57 <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>58 <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>59 </body>60 </html>

效果图：