BootStrap实用代码片段之一

<!--html页面布局--><div class="container-fluid page-wrapper"> <!--导航栏--> <div class="navbar navbar-default navbar-fixed-top" role="navigation">  <div class="container">   <!--logo图标-->   <div class="navbar-header">    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">     <span class="sr-only">切换导航条</span> <span class="icon-bar"></span>     <span class="icon-bar"></span> <span class="icon-bar"></span>    </button>    <a class="navbar-brand" href="">     <img src="images/logo_2.png" alt="">    </a>   </div>   <!--导航栏菜单-->   <div class="collapse navbar-collapse" id="myMenu">    <ul class="nav navbar-nav">     <li>      <a href="index.html" style="">主页</a>     </li>     <li>      <a href="#" data-toggle="modal">河道站点</a>     </li>     <li>      <a href="#" data-toggle="modal">水库站点</a>     </li>     <li>      <a href="#">气象站点</a>     </li>     <li>      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span class="caret"></span>      </a>      <ul class="dropdown-menu">       <li>        <a data-toggle="modal">1小时降雨</a>       </li>       <li>        <a href="#">3小时降雨</a>       </li>       <li>        <a href="#">24小时降雨</a>       </li>      </ul>     </li>    </ul>    <form class="navbar-form navbar-left" role="search">     <div class="form-group">      <input type="text" id="datetimepicker" class="form-control" placeholder="选择日期">     </div>     <button type="button" class="btn btn-default">确定</button>    </form>   </div>  </div> </div> <!--地图窗口--> <div class="container-fluid" id="map"></div></div></body></html>

*{margin:0;padding:0;border:0;}html, body{height:100%;width:100%;overflow:hidden;}body{padding-top:50px;}.page-wrapper{margin:0;padding:0;height:100%;overflow:hidden;}#map{width:100%;height:100%;}