BootStrap實用代碼片段之一

    這篇文章主要為大家詳細介紹了BootStrap實用代碼片段之一，總結(jié)在使用BootStrap中遇到的問題，并記錄解決方法，感興趣的小伙伴們可以參考一下
    應用場景：經(jīng)典上下布局中，頂部導航條固定，下部填充不顯示滾動條 
    解決方案：導航條固定在頂部，同時為body設置內(nèi)邊距（padding-top），內(nèi)邊距為導航條高度（默認50px，可自己調(diào)整高度），html代碼如下：
    <!--html頁面布局-->
    <div>
      <!--導航欄-->
      <div role="navigation">
        <div>
          <!--logo圖標-->
          <div>
            <button type="button" data-toggle="collapse" data-target="#myMenu">
              <span>切換導航條</span> <span></span>
              <span></span> <span></span>
            </button>
            <a href="">
              <img src="images/logo_2.png">
            </a>
          </div>
          <!--導航欄菜單-->
          <div id="myMenu">
            <ul>
              <li>
                <a href="index.html">主頁</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="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span></span>
                </a>
                <ul>
                  <li>
                    <a data-toggle="modal">1小時降雨</a>
                  </li>
                  <li>
                    <a href="#">3小時降雨</a>
                  </li>
                  <li>
                    <a href="#">24小時降雨</a>
                  </li>
                </ul>
              </li>
            </ul>
            <form role="search">
              <div>
                <input type="text" id="datetimepicker" placeholder="選擇日期">
              </div>
              <button type="button">確定</button>
            </form>
          </div>
        </div>
      </div>
      <!--地圖窗口-->
      <div id="map"></div>
    </div>
    </body>
    </html>
    CSS代碼：
    *{
    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%;
    }
    希望本文所述對大家學習Bootstrap有所幫助。