[TOC] # 柵格化系統 Bootstrap是做響應式布局，UI框架，配合JQuery使用 ## 1初認識 Bs的設計者把所有的終端設備按分辨率來分成4個檔： \>\= 1200px 大屏幕 版心 1170 \>\=992px 中等屏幕 版心 970 \>\=768px 小屏幕 版心 750 <768px 超小屏幕（手機） 版心 自動撐滿 在把屏幕分辨率分為4檔之后，**再把版心分成12列**，讓盒子占其中的多少列，因為版心寬度不同，盒子在不同檔次的分辨率下實際寬度就不同了，所以利用柵格系統把盒子做成響應式。 ### 1.1視口標簽 **作用** 禁止移動端的瀏覽器對我們的頁面內容進行縮放 ## 2如何讓盒子占多少列 -----給類： col-lg-num 盒子在**大屏幕**下占num列（在小屏幕中會獨占一行 ） col-md-num 盒子在**中等屏幕、大屏幕**下占num列 col-sm-num 盒子在**小屏幕、中等屏幕、大屏幕**下占num列 col-xs-num 盒子在**所有屏幕**下占num列 ``` <div class="container"> /*版心盒子*/ <div class="row"> /*定義行*/ <!--.col-lg-1{$}*12--> <div class="col-lg-1">1</div> /*12列*/ <div class="col-lg-1">2</div> <div class="col-lg-1">3</div> <div class="col-lg-1">4</div> <div class="col-lg-1">5</div> <div class="col-lg-1">6</div> <div class="col-lg-1">7</div> <div class="col-lg-1">8</div> <div class="col-lg-1">9</div> <div class="col-lg-1">10</div> <div class="col-lg-1">11</div> <div class="col-lg-1">12</div> </div> </div> ``` ## 3偏移排序嵌套 ### 3.1列偏移 會影響其他的盒子 col-lg-offset -num ### 3.2列排序 不會影響其他的盒子 col-lg-push-num（向右偏移） col-lg-pull-num（向左偏移） ### 3.3組合 如果列格子col-xx-num中需要再分列，則稱為列嵌套。不管該格子原先占多少列，始終當作12列重新開始分。 ***** **清除浮動** **clearfix 加在出問題盒子的前面**