bootstrap柵格系統是什麼意思

什麼是柵格系統

#柵格系統是指，將頁面佈局分割成等寬的列，然後透過列數的定義來模組化頁面佈局。 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柵格系統

你可以透過使用這些對應裝置的柵格類別來決定自己套用在不同裝置上的佈局樣式。例如：

這個編碼的結果就是，這兩個div在pc端瀏覽起來是兩行（每行都佔據12列柵格），而在手機端瀏覽器來是一行兩列（每列佔據6列柵格） 。透過這種形式，就能很方便地使用柵格系統自訂自己的應用佈局了。

其他資訊

除了以上的使用方法之外，還能使用「列偏移類別」來快速對自己的柵格進行定位，使用方法類似

依照這樣的寫法，這個div就會在pc端向右偏移3列。

更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

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