Bootstrap筆記-----柵格系統01

.container 類用於固定寬度並支持響應式佈局的容器。

.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

 

一、網格系統是什麼東西

　　Bootstrap把一個頁面分爲12列，經過指定數字就可以設置寬度。簡單的示例:

<div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

　顯示效果以下：

　　

　　當瀏覽器的寬度縮小時(爲下面說明響應式作鋪墊)，顯示效果以下：

　　

要點：

　　一、row是容器，網格樣式要放在row容器裏面。

　　二、1個網頁是12列。

　　三、一共有4個前綴的網格class前綴，分別應用於分辨率的設備。

　　圖表以下：

　　

　二、響應式網格

　　示例說明：

<div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
    </div>

　　顯示效果以下：

　　

　　當瀏覽器縮小時：

　　

　　當再進一步縮小時：

　　

　　這就是所謂的響應式，說白了"響應式"就是根據瀏覽器的寬度來決定使用哪個class，以上效果展現了響應式佈局的原理:

• 當屏幕寬度u≥1200px時，bootstrap會自動選用col-lg-*這個class；
• 當屏幕寬度u≥992px時，bootstrap會自動選用col-sm-*這個class；
• 當屏幕寬度u≥768px時，bootstrap會自動選用col-md-*這個class；
• 當屏幕寬度u<768px時，bootstrap會自動選用col-lg-*這個class；

三、偏移列　偏移列的意思是隔開多少個列。

　　示例：

<div class="col-xs-12 col-sm-6 col-md-3">3</div>　　//向右偏移2列了
    <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>

　　顯示效果以下：

　　

　　.col-xs=* 類不支持偏移，它們能夠簡單地經過使用一個空的單元格來實現該效果。

　　這個樣式至關於設置了margin:寬度*列數。

　　四、嵌套列

　　在網格里嵌套網格

<div class="row">
        <div class="col-xs-8">
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
        </div>
    </div>

　　輸出效果以下：

　　

　　五、列排序

　　經過使用".col-md-push-*"和".col-md-pull-*"可以互換順序。其中*的範圍從1到11。

　　示例以下：

<div style="margin-top:20px"></div>
    無排序：
    <div class="row">
        <div class="col-sm-4">First</div>
        <div class="col-sm-8">Second</div>
    </div>
    有排序：
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">First</div>
        <div class="col-sm-8 col-sm-pull-4">Second</div>
    </div>

　　顯示效果以下：

　　

　　以上class使用的理解爲：原本First佔據4列，Second佔據8列，若是要互換位置，則First要向右推(push)8個列，而Second要向左拉4個列。