bootstrap佈局(一)柵格系統

【簡介】

Bootstrap

提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（

viewport

）尺寸的增長，系統會自動分爲最多

12

列。

【引入文件】

須要引入的文件有bootstrap的css樣式文件。覺得bootstrap框架的柵格系統

[HTML]

純文本查看

複製代碼

?

1	< link rel = "stylesheet" href = "lib/css/bootstrap.css" >

【柵格系統的原理】

網格系統經過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工做的：

1.行必須放置在.container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。

2. 使用行來建立列的水平組。

3. 內容應該放置在列內，且惟有列能夠是行的直接子元素。

4. 預約義的網格類，好比.row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。

5. 列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

6. 網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

根據媒體查詢來適配不一樣的屏幕設備

[CSS]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

/* 超小設備（手機，小於 768px） */ /* Bootstrap 中默認狀況下沒有媒體查詢 */ /* 小型設備（平板電腦，768px 起） */ @media ( min-width : @screen-sm-min) { ... } /* 中型設備（臺式電腦，992px 起） */ @media ( min-width : @screen-md-min) { ... } /* 大型設備（大臺式電腦，1200px 起） */ @media ( min-width : @screen-lg-min) { ... }

【網格選項】

下表總結了

Bootstrap

網格系統如何跨多個設備工做：

【基本結構與效果】

(1) 數據行.row 必須包含在容器.container中, 以便賦予覈實的對齊方式和內間距設置

[HTML]

純文本查看

複製代碼

?

1 2 3 4 5

< div class = "container" > < div class = "row" ></ div > </ div >

(2) 在行(.row)中能夠添加列(.column)，但列數之和不能超過平分的總列數，好比12

注意：bootstrap的柵格系統是向上兼容的，也就是說例如col-xs-6適用全部屏幕,col-md-4適用中屏幕及更大，可是不適用與sm屏幕和xs超小屏幕

[HTML]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

< div class = "container" > < div class = "row" > <!-- 需求： 超小屏幕768下： div 12等分顯示 小屏幕768~992下： div 6等分顯示 中等屏幕992~1200下： div 4等分顯示 大屏幕>1200下： div 2等分顯示 --> < div class = "col-xs-12 col-sm-6 col-md-4 col-lg-2" >1</ div > </ div > </ div >

2等分

4等分

6等分

12等分

（3）列偏移

col-xs-offset-3 向右偏移三格

[HTML]

純文本查看

複製代碼

?

1 2 3 4 5 6 7

< div class = "row" > < div class = " col-xs-3 col-xs-offset-3" >col-xs-3</ div > < div class = " col-xs-2 col-xs-offset-2" >col-xs-2</ div > </ div >

（4）

class=」 visible-xs」 在超小屏幕下隱藏

class=」 visible-sm」 在小屏幕下隱藏

class=」 visible-md」 在中等屏幕下隱藏

class=」 visible-lg」 在大屏幕下隱藏

更多技術資訊可關注：gzitcast