引言
Bootstrap 5 提供移动优先的栅格系统、实用工具类和常用 UI 组件，适合快速搭建响应式页面。它的 CSS 负责布局和外观，模态框、折叠菜单等交互由 Bootstrap JavaScript 提供。本文从页面骨架开始，依次介绍工具类、组件、主题定制和常见排错方法。
核心概念
1. 12 列栅格系统
Bootstrap 的布局通常遵循 container > row > col 的嵌套关系。默认样式用于最小屏幕，再通过 sm、md、lg 等断点逐步增强大屏布局：
<div class="container">
<div class="row">
<div class="col-12 col-md-6">左栏：小屏全宽，中屏占 6 列</div>
<div class="col-12 col-md-6">右栏：小屏全宽，中屏占 6 列</div>
</div>
</div>
container 控制内容最大宽度，row 处理列的负边距，col-{breakpoint}-{n} 表示从指定断点开始占用的列数。每行列宽总和超过 12 时会换行，卡片列表可以直接使用 row-cols-* 自动分配列数。
2. 实用工具类
工具类可以快速表达间距、颜色、显示状态和 Flexbox 布局：
<div class="mt-3 p-4 bg-light">上边距和内边距</div>
<div class="d-flex justify-content-between align-items-center">
<span>标题</span><span class="text-secondary">更新时间</span>
</div>
移动优先的显示控制可以组合 d-none d-md-block；间距则使用 m-*、p-* 及方向变体。使用工具类前先确认项目采用的 Bootstrap 版本，避免混用旧版本命名。
3. 组件与 JavaScript
导航栏、卡片、表单、模态框和 Toast 等组件有统一的 HTML 结构。只需要 CSS 的组件可以只加载样式；折叠菜单、模态框等交互组件还需要 Bootstrap 的 JavaScript 和 Popper（由完整包或对应模块提供）。
实际应用
登录页卡片
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white"><h1 class="h5 mb-0">系统登录</h1></div>
<div class="card-body">
<form action="/login/" method="post">
<div class="mb-3">
<label class="form-label" for="username">用户名</label>
<input id="username" name="username" class="form-control" autocomplete="username" required>
</div>
<div class="mb-3">
<label class="form-label" for="password">密码</label>
<input id="password" name="password" type="password" class="form-control" autocomplete="current-password" required>
</div>
<button type="submit" class="btn btn-primary w-100">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
这里用 col-12 col-md-6 col-lg-4 控制卡片宽度，表单标签、name 和 autocomplete 属性则保证可访问性和浏览器自动填充正常工作。
电商卡片网格
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<article class="card h-100">
<img src="/media/product.jpg" class="card-img-top" alt="商品名称">
<div class="card-body">
<h2 class="h5 card-title">商品名称</h2>
<p class="card-text">商品说明。</p>
<a class="btn btn-outline-primary" href="/products/example/">查看详情</a>
</div>
</article>
</div>
</div>
</div>
row-cols-1 让小屏幕使用单列，row-cols-md-3 在中屏以上切换为三列，g-4 统一控制网格间距。图片应提供描述性的 alt 文本，实际项目中还应为重复卡片生成唯一链接和标题。
管理后台的嵌套网格
<div class="container-fluid">
<div class="row">
<aside class="col-12 col-lg-2 bg-light">侧边导航</aside>
<main class="col-12 col-lg-10">
<div class="row g-3">
<div class="col-12 col-md-6 col-xl-3"><div class="card p-3">统计卡片 1</div></div>
<div class="col-12 col-md-6 col-xl-3"><div class="card p-3">统计卡片 2</div></div>
<div class="col-12 col-md-6 col-xl-3"><div class="card p-3">统计卡片 3</div></div>
<div class="col-12 col-md-6 col-xl-3"><div class="card p-3">统计卡片 4</div></div>
</div>
</main>
</div>
</div>
外层网格负责侧边栏和主内容，内层网格负责统计卡片。嵌套时让每一层都保持 row 包裹 col，可避免负边距和间距异常。
导航栏与交互组件
导航栏折叠、模态框等行为可以用 data-bs-* 属性声明，也可以通过 JavaScript API 初始化：
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#helpModal">查看帮助</button>
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpTitle" aria-hidden="true">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-header"><h2 class="modal-title h5" id="helpTitle">帮助</h2></div>
<div class="modal-body">这里放置帮助内容。</div>
</div></div>
</div>
使用模块化构建时，可以只导入实际需要的组件：
import { Modal, Toast } from 'bootstrap';
const modal = new Modal('#helpModal');
modal.show();
定制与工程实践
Sass 主题定制
不要直接修改依赖包中的源文件，应该在导入 Bootstrap 前覆盖变量：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
$primary: #3a86ff;
$danger: #ff006e;
@import "bootstrap/scss/bootstrap";
实际项目应根据安装版本调整导入顺序，并在构建后检查生成的 CSS 是否包含未使用模块。
图标与可访问性
Bootstrap Icons 可以作为独立依赖使用。图标按钮应保留可读文本或 aria-label，不要让图标成为唯一的操作提示：
<button type="button" class="btn btn-success">
<i class="bi bi-check-circle" aria-hidden="true"></i>
<span>提交</span>
</button>
响应式排错清单
- 先检查页面是否包含
viewport元标签。 - 确认
row > col嵌套关系和每行列宽总和。 - 对媒体元素使用
img-fluid或max-width: 100%，避免固定宽度撑破容器。 - 对移动端隐藏内容使用
d-none d-md-*，并确认隐藏内容不影响键盘操作。
常见问题
自定义样式被覆盖
将自定义 CSS 放在 Bootstrap 之后，优先通过更具体的项目命名空间解决冲突。!important 只能用于少数明确场景，不应成为长期维护策略。
组件交互没有反应
确认已加载正确版本的 Bootstrap JavaScript，并检查 data-bs-target、id 和 ARIA 属性是否对应。使用模块化导入时，还要确认构建工具没有把组件从最终包中移除。
浏览器兼容性
Bootstrap 5 不支持 Internet Explorer。若项目必须支持旧浏览器，应评估 Bootstrap 4 或其他兼容方案，并用实际目标浏览器测试，而不是只依赖自动添加 CSS 前缀。
总结
Bootstrap 5 的学习重点是栅格结构、移动优先断点、工具类和组件初始化。先用 container、row、col 搭出稳定骨架，再通过卡片、表单和导航组件完善页面，最后用 Sass 和按需导入控制主题与产物。遇到布局问题时，优先从嵌套关系、断点和固定宽度三个方向排查。
评论 (0)
暂无评论，快来抢沙发吧！