Bootstrap / class
===
###### tags: `frontend / Bootstrap`
###### tags: `frontend`, `Bootstrap`, `CSS`

<br>

[TOC]

<br>

## Bootstrap 核心精神
在 `class="..."` 中執行簡易指令，來達到 UI 設定

<br>

## 📐 Bootstrap Spacing Utilities Cheat Sheet

### 語法規則

{property}{sides}-{size}

---

### 1. Property (屬性)

* `m` → margin
* `p` → padding

---

### 2. Sides (方向)

* `t` → top (上)
* `b` → bottom (下)
* `s` → start (左邊，依語言方向而定)
* `e` → end (右邊，依語言方向而定)
* `x` → left + right (水平)
* `y` → top + bottom (垂直)
* (空白) → 四邊

---

### 3. Size (間距大小)

* `0` → `0`
* `1` → `0.25rem` (4px)
* `2` → `0.5rem` (8px)
* `3` → `1rem` (16px)
* `4` → `1.5rem` (24px)
* `5` → `3rem` (48px)
* `auto` → `margin: auto` (只限 margin)

---

### 4. 常見範例

| 類別 | 效果 |
| --------- | -------------------- |
| `m-3` | margin 四邊 `1rem` |
| `p-4` | padding 四邊 `1.5rem` |
| `mt-2` | margin-top `0.5rem` |
| `mb-5` | margin-bottom `3rem` |
| `mx-auto` | 左右 margin 自動置中 |
| `py-3` | 上下 padding `1rem` |
| `px-2` | 左右 padding `0.5rem` |

---

✅ 總結：

* `my-5` 就是上下 margin 3rem。
* `px-4` 就是左右 padding 1.5rem。
* `mx-auto` 常用來讓區塊水平置中。

<br>

---
---

<br>

## 討論
### my-5 用法解析
- ### Question

    <div class="container p-5 my-5 border">
      <h1>My First Bootstrap Page</h1>
      <p>This container has a border and some extra padding and margins.</p>
    </div>

my-5是特殊用法？

- ### gpt-5 (2025/08/18)
不是特殊用法喔，`my-5` 是 **Bootstrap 提供的 spacing utility class**，代表「margin on Y-axis（上下方向的外距）為 5」。

在 Bootstrap 裡 spacing 類別的命名規則是：

    {property}{sides}-{size}

* **property**:

* `m` → margin
* `p` → padding

* **sides**:

* `t` → top
* `b` → bottom
* `s` → start (左邊，依語言方向而定)
* `e` → end (右邊，依語言方向而定)
* `x` → left 和 right
* `y` → top 和 bottom
* 無 → 四邊

* **size**:

* `0` → 0
* `1` → 0.25rem
* `2` → 0.5rem
* `3` → 1rem
* `4` → 1.5rem
* `5` → 3rem
* `auto` → margin: auto

所以：

* `my-5` = `margin-top: 3rem; margin-bottom: 3rem;`
* `mx-3` = `margin-left: 1rem; margin-right: 1rem;`
* `p-4` = `padding: 1.5rem;`

這是 Bootstrap 標準設計好的工具類別，不算「特殊用法」，而是常用的 **Utility Classes**。

要不要我幫你整理一份完整的 spacing cheat sheet？

- ### gpt-5 (2025/08/18) - round2
好的 👍
以下是 **Bootstrap Spacing Utility Cheat Sheet (速查表)**，讓你快速查 margin / padding 的用法：

---

---

要不要我幫你畫一個 **圖表化對照表**（像矩陣顯示 margin/padding 在四邊的效果），更直觀？

<br>

{%hackmd vaaMgNRPS4KGJDSFG0ZE0w %}