Bootstrap響應式佈局原理

  Bootstrap響應式佈局是利用其柵格系統，對於不同的屏幕採用不同的類屬性。在開發中可以只寫一套代碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢（針對不同的設備分別寫不同的代碼）。Bootstrap的官方解釋：Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲做多12列。
  柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局。

柵格系統的工作原理：

1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便爲其賦予合適的排列（aligment
）和內補（padding）。
2.通過行（row）在水平方向創建一組列（column）。
3.自己內容應當放置於列（column）內，並且，只有列可以作爲行（row）的直接子元素。
4.類似.row和.col-xs-4這種預定義的類，可以用來快速創建柵格佈局。Bootstrap源碼中定義的mixin也可以用來創建語義化佈局。
5.通過爲列設置padding屬性，從而創建列與列之間的間隔（gutter）。通過爲.row元素設置負值margin從而抵消爲.container元素設置的padding，也就間接爲行（row）所包含的列（column）抵消掉了padding。
6.柵格系統的列是通過指定1到12的值來表示其跨越範圍。例如三個等寬的列可以使用三個.col-xs-4來創建。
7.如果一行（row）中包含了的列（column）大於12，多餘的列所在的元素將作爲一個整體另起一行排列。
8.柵格類適用於與屏幕寬度大於或等於分界點大小的設備，並且針對小屏幕覆蓋柵格類。
如下圖所示爲柵格系統在多種屏幕上的應用說明。

使用Bootstrap響應式佈局

  首先需要在head中引入meta標籤，添加viewpirt屬性，content中寬度等於設備寬度， initial-scale:頁面首次被顯示可見區域的縮放級別，取值1則頁面按實際尺寸顯示，無任何縮放；
maximum-scale:允許用戶縮放到的最小比例；
user-scalable:用戶是否可以手動縮放。代碼如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

  下面爲使用bootstrap佈局的頁面（登錄表單界面），針對的是手機超小屏幕（iphone5s）和PC屏幕（>=1200px)。col-xs-12:小屏幕佔12列大小，col-lg-5：大屏幕佔5列大小，col-lg-offset-3:大屏幕縮進3列大小。這是一個比較簡單的實例，想要適應其他屏幕如平板可添加col-md-* 屬性，大屏手機可添加col-sm-*屬性。具體的屏幕使用哪個屬性，可參考上面圖上的針對不同屏幕Bootstrap柵格系統的不同使用。

<div class="container-fluid login">
 <div class="row">
   <div  class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
     <form class="form-horizontal loginForm">
         <h3 class="form-signin-heading">用戶登錄</h3>
         <div class="form-group">
           <label for="email" class="col-sm-2 col-xs-3 control-label">郵箱</label>
           <div class="col-sm-8 col-xs-8">
             <input type="text" class="form-control"  name="email" placeholder="請輸入郵箱"> 
             <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
           </div>

         </div>
         <div class="form-group">
           <label for="password" class="col-sm-2 col-xs-3 control-label">密碼</label>
           <div class="col-sm-8 col-xs-8">
             <input type="password" class="form-control" name="password" placeholder="請輸入密碼">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
           </div>
         </div>
         <div class="form-group">
           <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
             <div class="checkbox">
               <label>
               <input type="checkbox">記住我
               </label>
             </div>
           </div>
           <div class="col-sm-4 col-xs-4 control-label" >
              <a href="resetPwd.html" id="forget">忘記密碼？</a>
           </div>

         </div>
         <div class="form-group">
           <div class="col-sm-12 col-lg-12">
             <button type="button" class="btn btn-primary btn-block" id="submit">登錄</button>
           </div>
         </div>
     </form>
     </div>
 </div>

代碼效果圖：
PC端：

手機端：