bootstrap的柵格系統有什麼用

在bootstrap中，柵格系統的作用是讓同一套頁面可以適應不同解析度的裝置；該系統將每一行平均分成12個格子，然後指定同一個元素在不同裝置上佔用的格子數目不同，從而實現不同設備的頁面佈局。

本教學操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap的柵格系統有什麼用

1.bootstrap柵格系統：作用就是使得同一套頁面可以適應不同的解析度的設備

2.柵格系統的實現：將每一行平均分為12個格子，然後指定同一個元素在手機裝置和pc裝置上佔用的格子數目不同，例如：一個div佔用電腦4個格子，在手機上佔用12個格子

3.步驟

1 .定義容器：相當於table 表格

*容器分類：

1.container：固定寬度隨著不同裝置而不同（留白）

2.container- fluid：100%

2.定義行：相當於tr 樣式：row

3.定義元素：指定該元素在不同的裝置上，所佔的格子數目。樣式：col-裝置代號-格子數目

*裝置代號：

1.xs：超小螢幕手機（768px）：col-xs-12

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

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

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

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

**注意：定義的類別屬性可以向上相容，而向下不相容，如果設備的寬度小於你設定的柵格類別屬性的設備的代號的最小值，預設會一個元素佔滿一整行。

相關推薦：bootstrap教學

#

以上是bootstrap的柵格系統有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！