HackMD訓練課程 8 (t08) - Bootstrap 的 Grid System
Introduction
目標
介紹 Bootstrap Grid System
大綱
- 安裝 Bootstrap web application
- Grid system 的工作原理
- 響應式切換點
安裝 Bootstrap web application
Include CSS
Include required JS
Use HTML 5 doctype
Add Responsive meta tag
Template for using the Bootstrap
Grid system 的工作原理
-
Container: Grid System 必須放在
.container中。Containers provide a means to center and horizontally pad your site’s contents in the viewport. -
Row: 一個 Container 中可以有多個 row。row 和 row 之間有留白。Row 裡面可以分割成多個 column
-
Column:
- 放置網頁的內容。
- 1 個 Row 總供有 12 個 column, column 間有留白。
- Column 可以設定在不同裝置下的寛度。
- Column 內可以再放 row, 再將該 column 分成 12 等份。
例子:
響應式切換點
Column 的寛度可隨不同的裝置而有不同的設定。
例如, 在手機上佔 12 columns, 但在平板上佔 8 columns。
when Width <576px, use col-? class
When Width >768px, use col-md-? class
Bootstrap 提供的響應式切換點及樣式
如果所有裝置上都是一樣的寛度, 使用 col-? 即可。
column class 的命名規則
.col: 不指定斷點及欄位數, 寛度平均分配。參考 All Breakpoints
.col-{n}: 指定欄位數, 但不指定斷點。用於不同裝置的斷點皆相同。
所有寛度下, row 的欄位切成 4/12, 8/12。
.col-{break_point}-{n}: 指定斷點及欄位數。
若超過 viewport 960px (lg) 寛度, row 的欄位切成 4/12, 8/12。若小於 960px, 則寛度皆相等。
Column 的寬度也可以混合多個斷點下的寬度, 視 viewport 的寬度動態調整。
大於 768px 時, row 的寬度切成 8/12, 2/12, 2/12。此時作用的為 col-md-? class。
小於 576px 時, 第一個 column 的寬度為 12/12. 第二及三個 column 的寬度分別為 6/12, 6/12。此時作用的為 col-?。
