Bootstrap 網格系統
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。
什麼是網格（Grid）？
在平面設計中，網格是一種由一系列用於組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用於打印設計中的設計佈局和內容結構。在網頁設計中，它是一種用於快速創建一致的佈局和有效地使用
HTML 和 CSS 的方法。
什麼是 Bootstrap 網格系統（Grid System）？
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到
12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。
Bootstrap 網格系統（Grid System）的工作原理
- 1. 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
- 2. 使用行來創建列的水平組。
- 3. 內容應該放置在列內，且唯有列可以是行的直接子元素。
- 4. 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。LESS 混合類可用於更多語義佈局。
- 5. 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表 示第一列和最後一列的行偏移。
- 6. 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4