Bootstrap5提供了大量實用工具類，幫助開發者快速實現常見樣式效果，無需編寫複雜CSS。本文將聚焦浮動、陰影與文本對齊這三個基礎且常用的工具類，通過簡單示例帶你輕鬆上手。
一、浮動工具類：讓元素“浮”起來¶
浮動是佈局中常用的技巧，Bootstrap5用簡潔的工具類幫你快速實現元素左右浮動，避免複雜CSS。
核心類名及作用¶
float-start：讓元素靠左浮動（默認float: left）float-end：讓元素靠右浮動（默認float: right）clearfix：清除浮動影響（防止父容器“塌陷”）
示例代碼¶
<!-- 基礎浮動示例 -->
<div class="float-start bg-primary text-white p-3 me-2">左浮動元素</div>
<div class="float-end bg-success text-white p-3">右浮動元素</div>
<!-- 父容器需清除浮動 -->
<div class="clearfix bg-light p-3 mt-2">
這是父容器，添加clearfix後不會因子元素浮動而“塌陷”
</div>
小提示¶
- 浮動元素需注意父容器高度：若父容器無高度，子元素浮動後父容器會“塌縮”，此時必須給父容器加
clearfix類。 - 浮動元素默認會脫離文檔流，需配合
margin（如me-2）避免重疊。
二、陰影工具類：一鍵添加立體效果¶
陰影能讓元素更有層次感，Bootstrap5預設了多種陰影強度，無需手動寫box-shadow。
核心類名及作用¶
shadow-sm：輕微陰影（淺陰影）shadow：默認陰影（標準強度）shadow-lg：強烈陰影（深陰影）no-shadow：移除陰影（無陰影效果）
示例代碼¶
<div class="shadow-sm p-3 bg-white rounded">輕微陰影</div>
<div class="shadow p-3 bg-white rounded mt-2">默認陰影</div>
<div class="shadow-lg p-3 bg-white rounded mt-2">強烈陰影</div>
<div class="no-shadow p-3 bg-white rounded mt-2">無陰影</div>
小提示¶
- 陰影僅影響視覺效果，不影響佈局，適合按鈕、卡片等需要“懸浮感”的元素。
- 可配合
rounded（圓角）類，讓陰影效果更柔和。
三、文本對齊工具類：快速控制文字方向¶
文本對齊是排版基礎，Bootstrap5通過工具類實現水平/垂直對齊，支持響應式適配。
水平對齊類¶
text-start：左對齊（默認）text-center：居中對齊text-end：右對齊- 響應式版本：如
text-md-center（中等屏幕及以上居中）
垂直對齊類¶
text-top：文字頂部對齊text-middle：文字中間對齊text-bottom：文字底部對齊
示例代碼¶
<!-- 水平對齊 -->
<p class="text-start bg-light p-2">左對齊：這是一段左對齊的文本，適用於正文內容。</p>
<p class="text-center bg-light p-2">居中對齊：這是一段居中的標題文本，突出顯示。</p>
<p class="text-end bg-light p-2">右對齊：這是一段右對齊的輔助文本。</p>
<!-- 響應式示例：小屏幕右對齊，大屏幕居中 -->
<p class="text-sm-end text-md-center bg-light p-2">
小屏幕右對齊，大屏幕居中：適配不同設備顯示
</p>
<!-- 垂直對齊（配合行高使用） -->
<div class="d-flex align-items-center bg-light p-2" style="height: 50px;">
<span class="text-top">頂部對齊</span>
<span class="text-middle">中間對齊</span>
<span class="text-bottom">底部對齊</span>
</div>
小提示¶
- 垂直對齊需配合
d-flex（Flex佈局）和align-items-*使用，單獨text-*僅控制水平方向。 - 響應式類格式：
text-[斷點]-[對齊方式]，斷點包括sm（小）、md（中）、lg（大）等。
總結¶
Bootstrap5的實用工具類讓樣式開發更高效，浮動、陰影、文本對齊是日常佈局中高頻用到的功能。通過本文示例，你可以快速掌握：
- 浮動需配合clearfix避免父容器塌陷；
- 陰影類根據需求選擇強度；
- 文本對齊支持水平/垂直及響應式適配。
建議將這些類名記在筆記中，實際開發時直接套用，逐步熟練後可進一步探索更多工具類（如背景色、間距等），提升開發效率！
快速測試：複製上述代碼到HTML文件中，引入Bootstrap5 CDN即可看到效果：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">