Bootstrap柵格化解析

版心(container)

1. 版心：class名為.container的容器，其版心的寬度在各個螢幕裝置下是不一樣的值，版心兩邊就是留白。
   各尺寸下版心寬度如下表：

   xs 繼承父元素寬度（即width:100%）sm 750pxmd 970pxlg 1170px

   螢幕裝置	版心寬度
   	##max-width:768px
   	min-width:768px
   	min-width:992px
   	min-width:1200px

#

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}@media (min-width: 768px) {
  .container {
    width: 750px;
  }}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

## 

不管什麼寬度的螢幕，版心容器.container總會有左右15px的padding，是為了讓內容不直接緊貼瀏覽器邊緣的。在一個container中永遠不要再嵌套一個container.

.container-fluid的版心容器跟小於768px螢幕的版心一樣，自己沒有設定固定寬度值，繼承其父元素的寬度。
.container容器是用來在響應式寬度上提供寬度約束。反應尺寸的改變其實改變的是container,行（row）和列（column）都是基於百分比的所以它們不需要做任何改變。

行（row）

#行：class名稱為.row的容器；它為列（col）一共了空間，總共分為12列。

1. row兩端會有兩個負的15px的margin值，為了抵銷掉container兩側的padding值。 .row在container外使用時無效的。

2. .row {
       margin-right: -15px;
       margin-left: -15px;
   }

3. 列（column）

每一列都有兩側15px的padding值。永遠不要在.row容器外使用col,否則col是無效的。

每列col的padding值給其內容提供了空白，使內容不會緊貼在瀏覽器邊緣，列之間也不會緊貼在一起。
==列都是依照百分比分配的(相對於版心寬度的百分比，所以版心越寬的，每列寬度就越大)==。

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}

栅格嵌套

1. #當設定了container/row/column之後,可以在column內再建立新的柵格系統，在column裡面直接再添加row就可以了，不需要再套container了，因為列的兩側padding值正好可以抵消row的兩側負的margin值，列相當於container了。

#偏移（offsets）

1. 偏移offset主要是靠列的margin -left值決定。偏移一列的話就是margin-left:8.3333333%(1/12),偏移兩列就是margin-left:16.66666667%(即2/12);

################################################################

.col-xs-offset-0 {
    margin-left: 0;
}.col-xs-offset-1 {
    margin-left: 8.33333333%;
}...
@median (min-width:768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
}
...

#########列的排序（Push 和Pull）#############在實際應用中更多表現的是呼喚位置和進行排序，允許你打破html中p從上到下從左到右的固定佈局。 ############pull 和push 是透過position的right 和left值實現的，pull是透過right值，pull-1值right:8.33333333% (1/12); push-1值=> left:8.33333333%(1/12);###############

// push 距离左边的距离（向右推的列数）以最小屏为例
.col-xs-push-2 {
  left: 16.66666667%;
}.col-xs-push-1 {
  left: 8.33333333%;
}.col-xs-push-0 {
  left: auto;
}...

// pull 距离右边的距离（向左拉的列数）以最小屏为例
.col-xs-pull-2 {
  right: 16.66666667%;
}.col-xs-pull-1 {
  right: 8.33333333%;
}.col-xs-pull-0 {
  right: auto;
}

以上是Bootstrap柵格化解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！