BS5 Utilities 实用工具

学习使用 Bootstrap 5 的内置实用工具类快速调整样式，如边框、阴影和文本。 · 难度：入门 · +15XP

Utilities 简介

Bootstrap 5 提供了大量实用工具类，用于快速设置常见 CSS 属性，无需编写自定义样式。包括边框、颜色、间距、阴影等。

类别	示例类
边框	`.border`, `.border-primary`, `.rounded`
阴影	`.shadow`, `.shadow-sm`, `.shadow-lg`
文本	`.text-center`, `.fw-bold`, `.text-uppercase`
背景	`.bg-primary`, `.bg-gradient`

<div class='border border-danger rounded-3 shadow p-3 mb-5 bg-body'>
  <p class='text-center fw-bold text-uppercase'>实用工具示例</p>
</div>

在右侧代码中，尝试组合多个工具类：给 div 添加 .shadow-lg 和 .bg-warning，并设置 .text-white 让文字变为白色。