2.一、Bootstrap V4自學之路------佈局---概述和網格系統

PS ：對於增長學習效率來講，我可恥的盜圖了。

    由於本身的配圖真的是太難看了。

一、工做機制（理論向）

在一個高層次，如下是網格系統的工做原理：

• 總共有三個主要的組件：容器、行和列。

• 容器——.container實現固定的寬度，.container-fluid實現全寬度，會將你的頁面的內容居中，幫助你對齊網格系統。

• 行是列的橫向組合，確保適當地排列你的列。

• 內容必須放置在列中，並且只有列能夠是行的直接子元素。

• 列類代表你想要佔用的列的數量，每行最多可用12列。因此若是你想用三個等寬列，你可使用.col-sm-4。

• 列的width是用百分比設置的。因此它們老是是流式的，並且尺寸與父元素相關。

• 列擁有水平的padding，以建立列與列之間的間隙。

• 總共有五個網格等級，每一個響應式分界點隔出一個等級：特小，小，中，大，特大。

• 網格等級基於寬度的最小值，意味着它們應用到某一等級以及這一等級之上的全部（好比，.col-sm-4應用到小、中、大、特大設備）

• 對於更多的主意上的標記，你可使用預約義的網格類或者Sass mixins。

二、一個例子

    

<div class="container">
   <div class="row">     
       <div class="col-sm-4">       One of three columns     </div>     
       <div class="col-sm-4">       One of three columns     </div>     
       <div class="col-sm-4">       One of three columns     </div>   
   </div>
</div>

三、網格選項（工具向）

經過一個簡單的表格查看Bootstrap的網格系統在多種設備上的工做的方方面面：

	特小屏          <34em / 480px	小屏          ≥34em / 480px	中屏          ≥45em / 720px	大屏          ≥62em / 992px	特大屏          ≥75em / 1200px
網格行爲	始終橫向排布	開始瓦解，在斷點之上保持橫向排布。
Container width	無 (自動)	34rem / 480px	45rem / 720px	60rem / 960px	72.25rem / 1156px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# 列格	12
列間隙寬度	30px (每列兩側各15px)
可嵌套性	能夠
可偏移性	能夠
列排序	能夠

xs能夠理解爲，適應全部窗體大小！

四、重置位移offset, 推push, 拉pull

PS：.row中的col-**-num 的num數值相加，不能超過12。由於row中有12等分，超出部分將自動另起一行。

PS：移動端和桌面端。能夠class="col-xs-12 col-md-8"這樣來處理，瀏覽器會自動響應。（若是訪問量太大，建議JS分流，判斷來訪設備，跳轉到不一樣的頁面。百度首頁、淘寶首頁就是這樣作的）

PS：響應式列重置將在第二章最後一節去學習。

PS：列能夠嵌套N層。

<div class="row">
   <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row"><!--此處在嵌套，嵌套後row內的格佈局，仍然是12個格 -->
               <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
               </div>
               <div class="col-xs-4 col-sm-6">
                    Level 2: .col-xs-4 .col-sm-6
               </div>
        </div>
    </div>
</div>

位移列：offset

class="col-md-4 col-md-offset-4"

解釋：建立一箇中等屏幕大小的塊，這個塊佔row的4個格，而且這個塊在中等屏幕的顯示下，向右平移4個格。

簡答的說：增長這個塊的左邊距 4格。（offset-2，則是增長這個塊的左邊距2格）

<div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

列排序：push & pull

push：個人理解，推，向右平移。

pull：個人理解，拉，向左平移。

PS：這裏要聯繫offset一塊兒講，push和offset從顯示的樣子上來看都是向右平移。

        但不一樣的是，offset左邊距永遠存在。而push和pull的平移是，若是有交叉，則重疊在一塊兒。

        換句話說，offset超出12格限制則會換行。而push和pull超出12格限制仍然在同一行中。

1
<div class="row">
   <div class="col-md-9">.col-md-9</div>
   <div class="col-md-3">.col-md-3</div>
</div>
2
<div class="row">
    <!--col-md-9 向右平移2個格 -->
   <div class="col-md-9 col-md-push-2">.col-md-9</div>
    <!--col-md-3 向左平移8個格 -->
   <div class="col-md-3 col-md-pull-8">.col-md-3</div>
</div>
3
<div class="row">
    <!--col-md-9 向右平移2個格 -->
   <div class="col-md-9 col-md-push-2">.col-md-9</div>
    <!--col-md-3 向左平移7個格 ,注意，他們重疊了。重點是它沒有換行-->
   <div class="col-md-3 col-md-pull-7">.col-md-3</div>
</div>