生活随笔
收集整理的這篇文章主要介紹了
Bootstrap源码解读之栅格化篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文純屬自己研究所寫筆記，如果有錯誤還請多多指教提出
版心(container)
版心：class名為.container的容器，其版心的寬度在各個屏幕設備下是不一樣的值，版心兩邊就是留白。?
各尺寸下版心寬度如下表：
屏幕設備版心寬度
| max-width:768px | xs 繼承父元素寬度（即width:100%） |
| min-width:768px | sm 750px |
| min-width:992px | md 970px |
| min-width:1200px | lg 1170px |
.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列。row兩端會有兩個負的15px的margin值，為了抵消掉container兩側的padding值。.row在container外使用時無效的。
.row {
margin-right:
-15px;
margin-left:
-15px;
}
?
列（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%;}
...
} ?
柵格嵌套
當設置了 container/row/column之后,可以在column內再創建新的柵格系統，在column里面直接再添加row就可以了，不需要再套container了，因為列的兩側padding值 正好可以抵消row的兩側負的margin值，列相當于container了。
偏移（offsets）
偏移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中div從上到下 從左到右的固定布局。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源码解读之栅格化篇的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
