初學者--bootstrap（四）柵格系統----在路上（8）

---------------------------------------柵格系統：是bootstrap提供的響應式佈局方式--------------------------------------------

柵格系統的核心：
就是把容器container劃分12等分，也就是版心被劃分12等份。

下面的介紹也是以bootstrap中全局css樣式；詳情可觀看http://v3.bootcss.com/css/瞭解，在這再也不贅述。

如今來總結一下應用步驟：

（1）：首先應該建立一個容器

<div class="container">
    <div class = "row">（行）
        列
        列
    </div>
</div>

注：（container、row是bootstrap中原有的），row要包含在容器中，而容器class類有

container、container-fluid（流式版心）這兩個類名是bootstrap提供的，

container是固定寬度，bootstrap已劃分好，而container-fluid寬度爲100%（瀏覽器的寬度）

（2）：建立合適的柵格系統

<div class = "row">
    <div class ="col-sm-6 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
</div>

注：這裏以屏幕大於1200時作解釋
col-lg-2，col-lg-爲固定格式，col-lg-2表明屏幕大於1200時，當前的內容佔兩個格子，

也就是佔12個格子的六分之一；也就是col-lg-數字，數字是幾，就是佔當前行的多少分，

具體可參考下面代碼， 這裏以屏幕大於992和小於992的顯示設置：

屏幕大於992時，效果圖以下：

屏幕小於992時，效果圖以下：

（3）：柵格系統的劃分一共有四種

佈局容器：container 版心 Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。 

版心取值範圍 1.屏幕大小 手機（<768） 寬度100% --------> col-xs- 

2.小屏幕（平板） 768--992 寬度爲750px -------> col-sm-

3.顯示器（電腦） 992-1200 寬度爲970px--------> col-md- 

4.超大屏幕 大於1200 寬度爲1170px --------> col-lg-

注：

若是想讓頁面儘量的多響應式排版，儘可能將四個標準都寫上

即：xs sm md lg，那麼他們分別有什麼特性呢？ 第一種狀況 只設置md,那麼 lg也會和md現象一致。而xs,md沒有響應式樣子 第二種狀況 只設sm，那麼 sm\md\lg一個樣子，xs沒有樣子 第三種狀況 設置sm\md 那麼 sm一個樣子， md和lg一個樣子，xs沒有樣子 第四種狀況 只設置xs ，那麼xs\sm\md\lg全設置上了 （因此說xs特殊）

（4）.關於row

1） 當一個row裏面的元素超過12分，會在row裏面另起一行 

2）當小於12份，放不滿整行時，會有空格部分 。

3）row中如有元素使用列的偏移、列的嵌套、列的排序；

 列的偏移：offset；

列的嵌套：row中有row；

列的排序：

經過使用 .col-md-push- 和 .col-md-pull-類就能夠很容易的改變列（column）的順序。push日後移動，pull往前移動 

注：如有同行中元素A設置offset，元素B不設置，則B還會緊貼着A，並不會覆蓋住B；若A偏移，B也偏移，那他們就各自偏移，互不影響；

   也就是offset會影響其餘，會帶着其餘一塊兒偏移，

   但，push-幾個單位或者pull-幾個單位，不會影響其餘，也就是，若A發生偏移，B沒有設置偏移，因此會出現A覆蓋住了B.

學習心得：

bootstrap爲程序員提供了各類炫酷的結構、樣式、行爲等，

使寫代碼更加方便，更加輕鬆，可對於初學者來講，內容顯得特別多與繁瑣，

因此，不要着急，先掌握基礎的知識，

會應用他，明白他是作什麼的，就夠了。在工做或學習中應用的多了，天然就上手了。------------------------------------------共勉----------------------------------------------------