在bootstrap中，柵格系統(tǒng)的作用是讓同一套頁面可以適應(yīng)不同分辨率的設(shè)備；該系統(tǒng)將每一行平均分為12個(gè)格子，然后指定同一個(gè)元素在不同設(shè)備上占用的格子數(shù)目不同，從而實(shí)現(xiàn)不同設(shè)備的頁面布局。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap的柵格系統(tǒng)有什么用

1.bootstrap柵格系統(tǒng)：作用就是使得同一套頁面可以適應(yīng)不同的分辨率的設(shè)備

2.柵格系統(tǒng)的實(shí)現(xiàn)：將每一行平均分為12個(gè)格子，然后指定同一個(gè)元素在手機(jī)設(shè)備和pc設(shè)備上占用的格子數(shù)目不同，例如：一個(gè)div占用電腦4個(gè)格子，在手機(jī)上占用12個(gè)格子

3.步驟

1.定義容器：相當(dāng)于table 表格

*容器分類：

1.container：固定寬度隨著不同設(shè)備而不同（留白）

2.container-fluid：100%

2.定義行：相當(dāng)于tr 樣式：row

3.定義元素：指定該元素在不同的設(shè)備上，所占的格子數(shù)目。樣式：col-設(shè)備代號-格子數(shù)目

*設(shè)備代號：

1.xs：超小屏幕 手機(jī)（768px）：col-xs-12

2.sm：小屏幕 平板（>=768px）

3.md：中等屏幕 桌面顯示器（>=992px）

4.lg：大屏幕 大桌面顯示器（>=1200px）

**注意：一行中如果格子的數(shù)目超過12個(gè)，超出的部分自動換行

**注意：定義的類屬性可以向上兼容，而向下不兼容，如果設(shè)備的寬度小于你設(shè)置的柵格類屬性的設(shè)備的代號的最小值，默認(rèn)會一個(gè)元素占滿一整行。