育將電腦工作室 - 線上書籍

Bootstrap4
==========

一、間隔 (Spacing)

Bootstrap 包括各種簡寫響應式 margin、padding 的通用類別，可用來修改一個元素的外觀。

二、使用

1. 用於所有中斷點（從`xs`到`xl`）時，不需加入中斷點縮寫。這些 Class 將從 `min-width: 0` 及以上引用，不受 media query 的約束。但是其餘的就包含中斷點縮寫。對於 `xs`，使用固定格式 `{property}{sides}-{size}` 命名這些 Class，對於 `sm`、 `md`、`lg` 和 `xl`，使用格式 `{property}{sides}-{breakpoint}-{size}`。
2. *屬性* 設定:
 
- `m` - 這個 class 會設定 `margin`
- `p` - 這個 class 會設定 `padding`
 
3. *邊緣* 設定:
 
- `t` - 這個 class 會設定 `margin-top` 或 `padding-top`
- `b` - 這個 class 會設定 `margin-bottom` 或 `padding-bottom`
- `l` - 這個 class 會設定 `margin-left` 或 `padding-left`
- `r` - 這個 class 會設定 `margin-right` 或 `padding-right`
- `x` - 這個 class 會設定 `*-left` 和 `*-right`
- `y` - 這個 class 會設定 `*-top` 和 `*-bottom`
- 空白 - 如果邊緣 class 未加入則會設定 `margin` 或 `padding` 在元素的四個邊緣
 
4. *尺寸* 設定:
 
- `0` - 這個 class 會設定 `margin` 或 `padding` 的樣式值為 `0`
- `1` - (預設時) 這個 class 會設定 `margin` 或 `padding` 於 `$spacer * .25`
- `2` - (預設時) 這個 class 會設定 `margin` 或 `padding` 於 `$spacer * .5`
- `3` - (預設時) 這個 class 會設定 `margin` 或 `padding` 於 `$spacer`
- `4` - (預設時) 這個 class 會設定 `margin` 或 `padding` 於 `$spacer * 1.5`
- `5` - (預設時) 這個 class 會設定 `margin` 或 `padding` 於 `$spacer * 3`
- `auto` - 這個 class 會設定 `margin` 為 auto

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown