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">