bootstrap的12柵格系統是什麼

在bootstrap中，12柵格系統指的是將頁面佈局分成等寬的1到12列，並透過比例計算來定義列寬，透過列數定義模組化的頁面佈局方式，是一個響應式的、行動裝置優先的柵格系統。

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

bootstrap的12柵格系統是什麼

Bootstrap 提供了一套響應式、行動裝置優先的串流柵格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。

什麼是柵格（Grid）？

在平面設計中，柵格是一種由一系列用於組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用於列印設計中的設計佈局和內容結構。在網頁設計中，它是一種用於快速創建一致的佈局和有效地使用 HTML 和 CSS 的方法。

簡單地說，網頁設計中的柵格用於組織內容，讓網站易於瀏覽，並降低用戶端的負載。

什麼是 Bootstrap 柵格系統（Grid System）？

Bootstrap 包含了一個響應式的、行動裝置優先的、不固定的柵格系統，可以隨著裝置或視窗大小的增加而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。

柵格系統是指，將頁面佈局分割成等寬的列，然後透過列數的定義來模組化頁面佈局。 Bootstrap的柵格系統採用了1-12列的模式，並且透過比例計算來設定你定義的列寬。

例如你這一行想要採用兩列的佈局模式，那麼每列的寬度都為外容器的50%，不管你用什麼設備瀏覽，它都會採用這樣的比例進行展示。不過如果當設備寬度小於你設定的最小寬度，那麼這兩列就會並排成為一列。

Bootstrap的柵格系統

在Bootstrap中使用柵格系統非常簡單方便，只需要在你的div中引入它們已經定義好的類別。

我們先看看Bootstrap有幾種柵格類別可以使用：

1、.col-xs-* 這是超小螢幕類別（<768px），類似手機等設備。

2、.col-sm-* 這是小螢幕裝置類別（≥768px且<992px），類似平板裝置。

3、 .col-md-* 這是中型裝置類別（≥992px且<1200px）。

4、 .col-lg-* 這是大型裝置類別（≥1200px）。

相關推薦：bootstrap教學

#

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