三、CSS工具类
3.1 布局工具类
Flex布局： Bootstrap 5全面拥抱Flexbox，提供了丰富的Flex工具类。
<!-- 弹性容器 -->
<div class="d-flex justify-content-between align-items-center">
<div>左侧内容</div>
<div>右侧内容</div>
</div>
<!-- 弹性方向 -->
<div class="d-flex flex-column flex-md-row">
<!-- 移动端垂直排列，桌面端水平排列 -->
</div>
<!-- 弹性填充 -->
<div class="d-flex">
<div class="flex-fill">等宽填充</div>
<div class="flex-fill">等宽填充</div>
</div>
显示工具类：
<!-- 响应式显示/隐藏 -->
<div class="d-none d-md-block">只在桌面端显示</div>
<div class="d-block d-md-none">只在移动端显示</div>
3.2 间距工具类
Bootstrap 5的间距工具类采用新的命名规范，以支持RTL布局：
间距值从0到5扩展到0到6，mt-6现在有效：
<div class="mt-3 mb-4 ms-2 me-5 p-4">
使用新版间距类
</div>
3.3 排版工具类
字体大小： 使用fs-*前缀替代类似h1-h6的类：
<p class="fs-1">最大字体（类似h1）</p>
<p class="fs-2">第二大字体</p>
<p class="fs-6">最小字体</p>
文本对齐与变换：
<p class="text-start">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>
<p class="text-uppercase">大写</p>
<p class="text-lowercase">小写</p>
<p class="text-capitalize">首字母大写</p>
字体粗细：
<p class="fw-bold">粗体</p>
<p class="fw-bolder">更粗</p>
<p class="fw-semibold">半粗</p>
<p class="fw-normal">正常</p>
<p class="fw-light">细体</p>
<p class="fst-italic">斜体</p>
3.4 颜色与背景
Bootstrap 5预定义了主题颜色类：
<!-- 文本颜色 -->
<p class="text-primary">主要颜色</p>
<p class="text-secondary">次要颜色</p>
<p class="text-success">成功颜色</p>
<p class="text-danger">危险颜色</p>
<p class="text-warning">警告颜色</p>
<p class="text-info">信息颜色</p>
<p class="text-light bg-dark">浅色文字深色背景</p>
<p class="text-dark">深色文字</p>
<p class="text-body">正文颜色</p>
<p class="text-muted">柔色文字</p>
<p class="text-white bg-primary">白色文字</p>
<!-- 背景颜色 -->
<div class="bg-primary p-3">主要背景</div>
<div class="bg-success p-3">成功背景</div>
<div class="bg-danger p-3">危险背景</div>
<div class="bg-warning p-3">警告背景</div>
<div class="bg-info p-3">信息背景</div>
<div class="bg-light p-3">浅色背景</div>
<div class="bg-dark p-3 text-white">深色背景</div>
四、CSS组件
4.1 按钮
Bootstrap提供了多种预定义样式的按钮组件：
<!-- 基础按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-light">浅色按钮</button>
<button type="button" class="btn btn-dark">深色按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>
<!-- 轮廓按钮 -->
<button type="button" class="btn btn-outline-primary">轮廓主要按钮</button>
<!-- 按钮尺寸 -->
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
<!-- 块级按钮 -->
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">块级按钮</button>
</div>
<!-- 禁用状态 -->
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>
4.2 卡片
卡片是Bootstrap 5中最常用的内容容器组件：
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="图片描述">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这是一段示例文本，展示卡片内容。</p>
<a href="#" class="btn btn-primary">前往</a>
</div>
</div>
<!-- 卡片组 -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<!-- 卡片内容 -->
</div>
</div>
<!-- 更多卡片... -->
</div>
4.3 导航栏
导航栏是响应式设计的核心组件，Bootstrap 5的导航栏无需jQuery即可工作：
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<!-- 品牌Logo -->
<a class="navbar-brand" href="#">品牌名称</a>
<!-- 移动端折叠按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航链接容器 -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系</a>
</li>
</ul>
</div>
</div>
</nav>
关键点： 所有触发JavaScript交互的属性都必须使用data-bs-前缀，而不是v4的data-。
4.4 表单
Bootstrap 5对表单组件进行了全面优化，新增了浮动标签等特性：
<!-- 基础表单 -->
<form>
<div class="mb-3">
<label for="exampleInputEmail" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail"
aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们不会分享您的邮箱。</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck">
<label class="form-check-label" for="exampleCheck">记住我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<!-- 浮动标签（现代表单设计趋势） -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">邮箱地址</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="密码">
<label for="floatingPassword">密码</label>
</div>
<!-- 表单验证样式 -->
<form class="was-validated">
<div class="mb-3">
<input type="text" class="form-control is-valid" value="有效输入" required>
<div class="valid-feedback">输入有效！</div>
</div>
<div class="mb-3">
<input type="text" class="form-control is-invalid" value="无效输入" required>
<div class="invalid-feedback">请提供有效输入。</div>
</div>
</form>
4.5 模态框
模态框是Bootstrap最常用的JavaScript组件之一：
<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
启动模态框
</button>
<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="关闭"></button>
</div>
<div class="modal-body">
模态框内容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
