Bootstrap學習小小小小筆記

嗯，剛開始學，一點小tips，供 自己 回憶。
——————————————————————————————————–

（1）Bootstrap3已經是移動設備優先了。所以一般在head中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">

（2）Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。
行必須放置在 .container內，在行內放置列。
不同設備會查找不同class前綴，例如

<div class="container">
    <div class="row" >
      <div class="col-sm-3 col-md-6 col-lg-4">....</div>
      <div class="col-sm-9 col-md-6 col-lg-8">....</div>
    </div> 
</div>

這裏提供了 3 種不同的列布局，分別適用於三種設備。在手機上，它將是左邊 25% 右邊 75% 的佈局（sm的3、9）。在平板電腦上，它將是 50%/50% 的佈局（md的6、）。在大型視口的設備上，它將是 33%/66% 的佈局（lg的4、8）。

（3）由於Bootstrap 3 是移動設備優先的，所以在設計上Bootstrap 代碼應該從小屏幕設備開始，然後擴展到大屏幕設備上的組件和網格。
在佈局上優先設計更小的寬度。隨着屏幕大小的增加而添加元素。漸進增強。

（4）Bootstrap 中的媒體查詢允許您基於視口大小移動、顯示並隱藏內容。

/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

（5） .col-md-offset-* 類是偏移列。就是在該列的左margin增加 * 列，其中 * 範圍是從 1 到 11。當然，其他lg,sm也都是有偏移列的。

（6）列之間是可以嵌套的，但首先在父列中添加行，才能在行中嵌套子列

<div class="col-md-9">       <!--父列-->
         <div class="row">    <!--行-->
            <div class="col-md-6">...</div>   <!--子列-->
            <div class="col-md-6">...</div>   <!--子列-->
         </div>
 </div>

（7）Bootstrap有個特點，就是列可以排序。即以一種順序編寫列，然後以另一種順序顯示列。用.col-md-push-* 和 .col-md-pull-*實現。
如：class="col-md-8 col-md-pull-4"

（8）可以在<a>、<button> 或 <input>元素上使用按鈕 class。但最好在<button>上使用按鈕 class，避免跨瀏覽器的不一致性。