網格系統的實作原理,是透過定義容器大小,平分12份(也有平分成24份或32份,但12份是最常見的),再調整內外邊距,最後結合媒體查詢,就製作出了強大的響應式網格系統。 Bootstrap框架中的網格系統就是將容器平分成12份。
bootstrap的原理是什麼
bootstrap的實作原理
透過定義容器的大小,將平分為12份(也有24份,23份的,取12份是一打,表示進階完美的意思),再調整內外邊距,最後結合媒體查詢,製作出了強大的響應式網格系統。 (可以透過重新編譯LESS碼來源來修改12這個數值)。
1.資料行(.row)必須包含在容器(.container)中,以便賦予適當的對其方式和內邊距(padding)。
2.在行(.row)中可以加列(.column),但列數總和不能超過平分的總列數,例如:12.
3.透過設定內邊距(padding)從而建立列於列之間的間距。然後透過為第一列和最後一列設定負值的外距(margin)來抵消內距(padding)的影響。
4.不希望相鄰的兩個欄位緊靠近在一起,就用offset功能來實現。
相關推薦:《bootstrap教程》
以上是bootstrap的原理是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!