Bootstrap5的工具類就像“CSS代碼生成器”，不用寫一行CSS，通過添加簡單的類名就能快速設置樣式，極大提升開發效率。本文重點介紹最常用的margin/padding工具類和顯示隱藏技巧，適合零基礎快速上手。
一、Margin與Padding工具類¶
margin（外邊距）和padding（內邊距）是控制元素間距的核心工具類，命名規則清晰，使用起來非常直觀。
1. 命名規則¶
Bootstrap5的margin/padding類名格式統一爲：[屬性]-[方向]-[尺寸]，其中：
- 屬性：m（margin）或p（padding）
- 方向：t（top，上）、b（bottom，下）、l（left，左）、r（right，右）、x（左右，l+r）、y（上下，t+b）
- 尺寸：0（0間距）、1（0.25rem）、2（0.5rem）、3（1rem）、4（1.5rem）、5（3rem）、auto（自動，僅margin可用）
2. 常用Margin類¶
- 單獨方向控制：
mt-3：上外邊距（margin-top: 1rem）mb-2：下外邊距（margin-bottom: 0.5rem）ml-4：左外邊距（margin-left: 1.5rem）-
mr-1：右外邊距（margin-right: 0.25rem） -
複合方向控制：
mx-3：左右外邊距同時設置（margin-left: 1rem; margin-right: 1rem）my-2：上下外邊距同時設置（margin-top: 0.5rem; margin-bottom: 0.5rem）mx-auto：左右margin自動（塊級元素居中神器！例如：div class="mx-auto" style="width: 50%;"）
3. 常用Padding類¶
padding類與margin類似，區別是屬性爲p，作用是“內邊距”（內容與邊框的距離）：
- pt-2：上內邊距（padding-top: 0.5rem）
- pb-4：下內邊距（padding-bottom: 1.5rem）
- px-3：左右內邊距（padding-left: 1rem; padding-right: 1rem）
- py-1：上下內邊距（padding-top: 0.25rem; padding-bottom: 0.25rem）
4. 示例代碼¶
<!-- 帶margin和padding的div -->
<div class="mt-4 p-3 bg-light border">
這是一個帶樣式的div：
- 頂部有margin（mt-4，上間距1rem）
- 四周有padding（p-3，內間距0.75rem）
- 背景色和邊框通過其他類控制
</div>
二、顯示與隱藏技巧¶
通過工具類可以輕鬆控制元素在不同場景下的顯示/隱藏，無需寫媒體查詢。
1. 基礎display控制¶
直接通過d-*類控制元素的顯示類型（display屬性）：
- d-none：隱藏元素（display: none，不佔空間）
- d-block：塊級顯示（display: block）
- d-flex：彈性容器顯示（display: flex）
- d-inline：行內顯示（display: inline）
示例：隱藏按鈕（默認隱藏，hover時顯示）
<button class="d-none d-md-block">移動端隱藏，桌面端顯示</button>
2. 響應式顯示/隱藏（按斷點）¶
Bootstrap5提供基於斷點的顯示控制，斷點爲：sm（576px）、md（768px）、lg（992px）、xl（1200px）、xxl（1400px）。
- 隱藏邏輯：d-*-none（替換爲斷點），例如d-md-none（中等屏幕及以上隱藏）
- 顯示邏輯*：d-*-[類型]，例如d-sm-block（小屏幕及以上顯示爲塊級）
常用組合：
- d-none d-md-block：默認隱藏（移動端隱藏），中等屏幕及以上顯示
- d-md-none d-lg-block：中等屏幕隱藏，大屏幕顯示
- d-none d-xl-flex：默認隱藏，超大屏幕顯示爲彈性容器
3. 可見性控制（不改變顯示類型）¶
如果需要元素“不可見但仍佔空間”，使用invisible類：
<div class="invisible">內容不可見，但仍佔據位置</div>
<div>後面的內容會正常顯示在下方</div>
三、總結¶
Bootstrap5工具類通過簡潔的命名規則和響應式設計，讓樣式開發變得高效。margin/padding工具類只需記住“方向+尺寸”，顯示隱藏類記住“d-*+斷點”即可快速上手。實際開發中，可結合這些工具類快速搭建頁面，再用語義化HTML標籤保證結構清晰。
建議初學者多在代碼中嘗試不同組合，例如用mt-2 mx-auto讓按鈕居中，用d-sm-none隱藏移動端導航等，逐步熟悉工具類的使用場景。