Bootstrap 柵格系統

bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統。通過定義容器的大小，平分12份，可模擬table。乙個資料（row）必須包含在.container中，行（row）在水平方向上建立一組列（column），就如同tr中建立td。具體的內容放在column中，而且只有列（column）可以作為行（row）的子元素。

12柵格化，每乙個列（column）都有15px的左右邊距；

.container樣式原始碼：

.container
@media
(min-width
: 768px)
/*小型螢幕時,container樣式的寬度*/
}@media
(min-width
: 992px)
/*中型螢幕時,container樣式的寬度,縮小min-width範圍*/
}@media
(min-width
: 1200px)
/*大型螢幕時,container樣式的寬度,再次縮小min-width範圍*/
}

而12份可以自由組合，可以用完12，也可以只用一部分，只需要用符號「col-md-數字」的規則就可以了。

"container">
"row">
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"col-md-1">.col-md-1
"row">
"col-md-8">.col-md-8
"col-md-4">.col-md-4
"row">
"col-md-4">.col-md-4
"col-md-4">.col-md-4
"col-md-4">.col-md-4
"row">
"col-md-6">.col-md-6
"col-md-6">.col-md-6

效果圖：

列組合的實現方式只需要涉及左浮動和寬度的百分比即可.

列組合的原始碼：

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 /*定義每乙個組合的寬度百分比*/ .col-md-12 .col-md-11 .col-md-10 .col-md-9 .col-md-8 .col-md-7 .col-md-6 .col-md-5 .col-md-4 .col-md-3 .col-md-2 .col-md-1

列偏移：有時不能讓兩個相鄰的列挨在一起，需要利用柵格系統的列偏移（offset）功能來實現，就可以不用定義margin值。

使用 .col-md-offset- 的形式的樣式將列偏移到右側。

"container">
"row">
"col-md-4">.col-md-4
"col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4
"row">
"col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3
"col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3
"row">
"col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3

效果：通過檢視原始碼，我們可以發現其實列偏移就是利用了margin-left，有多少的offset,就有多少的margin-left

.col-md-offset-12 .col-md-offset-11 .col-md-offset-10 .col-md-offset-9 .col-md-offset-8 .col-md-offset-7 .col-md-offset-6 .col-md-offset-5 .col-md-offset-4 .col-md-offset-3 .col-md-offset-2 .col-md-offset-1 .col-md-offset-0

列巢狀：就是在乙個列裡面再宣告乙個或多個行（row）

"row">
"col-md-9">
level 1: .col-md-9
"row">
"col-md-6">level 2: .col-md-6
"col-md-6">level 2: .col-md-6 
"col-md-3">

效果圖：

可以看到，在乙個列（col-md-9）裡面，巢狀了乙個新行（row），然後在新行裡，又放置了兩個等寬列的col-md-6，這時兩個col-md-6加起來是12，但是總寬度和外面的col-md-9列的寬度一樣。所以，在任何乙個巢狀列裡，不管寬度是多少，都可以再進行12等分，並可以進一步組合。

列排序：

改變列的方向，也就是改變左右浮動，並設定浮動的距離。通過.col-md-push-*和.col-md-pull-*來實現這一目的。

// 原始碼1125行 .col-md-pull-12 .col-md-pull-11 .col-md-pull-10 .col-md-pull-9 .col-md-pull-8 .col-md-pull-7 .col-md-pull-6 .col-md-pull-5 .col-md-pull-4 .col-md-pull-3 .col-md-pull-2 .col-md-pull-1 .col-md-pull-0 .col-md-push-12 // 其他同理,上pull的設定類似,唯一不同的就是right和left的區別 .col-md-push-0

Bootstrap 柵格系統

Bootstrap 柵格系統

Bootstrap柵格系統

bootstrap 柵格系統

Bootstrap 柵格系統

Bootstrap 柵格系統

Bootstrap柵格系統

bootstrap 柵格系統

相關推薦