---
# System prepended metadata

title: Bootstrap / class
tags: [frontend / Bootstrap, CSS, frontend, Bootstrap]

---

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 %}