網格系統的實現原理很簡單， 可以將網格系統理解為表格。 它通過定義容器的大小， 將其平均分為12等份， 再調整內外邊距， 結合媒體查詢（Media Query）， 做出比較時髦的回應式網格系統。 網格系統通過行（row）和列（column）的組合來創建頁面配置， 其遵循如下規則。
1.row必須包含在樣式為.container或者container-fluid的容器中。 其中.container-fluid寬度為100%， 使用此樣式的目的是為了在網格系統中能夠更好的排列。 這兩個樣式一般用於div標籤上面， 用法如下：
container支持回應式設計， 其在媒體查詢樣式上做了如下處理。 其中768px、990px、1200px將螢幕分為四個區間段：
● 當螢幕
● 當螢幕≥768px時， .container寬度為750px。
●當螢幕≥990px時， .container寬度為970px。
● 當螢幕≥1200px時， .container寬度為1180px。
2.列（column）必須包含在行（row）中， 而其他標籤元素只能包含在列（column）中。 其中， 行使用.row樣式， 而列使用類似.col-lg-*的樣式， 如下所示：
網格系統中的列是通過指定1到12的值來表示其跨越的範圍（比如col-log-*， 這裡的*代表1~12之間的一個數字）。 行中的列樣式數位總和不能超過12， 如果超過12， 則超過的元素將另起一行。 通過設置行（row）與列（column）的padding、margin屬性來抵消和增加其之間的間隔。 網格系統參數如圖所示