什么是網格系統（Grid System）

Bootstrap的網格系統遵循“移動設備優先策略”，這個策略主要分成3個部分理解：①根據內容重要性進行優先顯示，②優先設計更小設備的布局，具體表現為基礎CSS是以移動設備優先，而平板、PC是根據媒體查詢進行顯示，③漸進增強，即隨著屏幕大小的增加而添加元素。

Bootstrap網格系統的工作原理：

通過將內容放置于行或列中進行顯示。

（1）行要使用類 .container，以獲得合適的內邊距以及對齊；

（2）使用行來創建列的水平組；

（3）只有列是行的直接子元素，內容放在列當中；

（4）可以使用預定義的網格類，如 .row 和 .col-xs-4，來創建行和列；

（5）列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。

媒體查詢：

（1）/* 超小設備（手機，小于 768px） */

          /* Bootstrap 中默認情況下沒有媒體查詢 */

（2）/* 小型設備（平板電腦，768px 起） */

@media (min-width: @screen-sm-min) { ... }

（3）/* 中型設備（臺式電腦，992px 起） */

@media (min-width: @screen-md-min) { ... }

（4）/* 大型設備（大臺式電腦，1200px 起） */

@media (min-width: @screen-lg-min) { ... }

（5）在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小范圍的屏幕大小之內

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }