Bootstrap 5 教程
Bootstrap 是全球最流行的前端组件库：把网页里最常出现的按钮、导航栏、卡片、表格、弹窗、轮播预先写成 CSS 类和 JS 插件，你在 HTML 标签上加几个 class 名，样式和交互就全有了。
学完 CSS 之后，你已经有能力手写任意样式，但每个按钮的悬停色、每个弹窗的遮罩层都自己写，太慢。Bootstrap 解决的就是这个问题：同样的页面，手写 CSS 要三天，用 Bootstrap 半天，而且天生适配手机。
学习目标
学完本教程，你将能够：
- 理解 Bootstrap 是什么，和手写 CSS、和 Vue/React 的区别
- 用一行 CDN 在页面里引入 Bootstrap 5
- 用 12 列栅格系统搭出移动端自适应的布局
- 直接使用导航栏、卡片、按钮、表格、警告框等常用组件
- 写出整齐的表单，并加上浏览器校验提示
- 用工具类（间距、文字、显示、Flex）微调页面，几乎不写自定义 CSS
- 用 data 属性做出弹窗、轮播、下拉菜单等交互，全程不用 jQuery
- 完成一个综合练习：把 CSS 教程的手写主页改造成 Bootstrap 版
学习路线
| 章节 | 核心内容 |
|---|---|
| 1. Bootstrap 5 是什么 | 组件库概念、v5 新特性、适用场景 |
| 2. 第一个页面：一行 CDN 起步 | 引入 CSS 与 JS、容器行列三件套 |
| 3. 栅格系统：12 列与断点 | col 系列、断点、移动优先、偏移与对齐 |
| 4. 常用组件 | 导航栏、按钮、卡片、表格、徽章、警告框 |
| 5. 表单 | 输入框、下拉、勾选、栅格排版与校验 |
| 6. 工具类 | 间距、文字、显示、Flex、CSS 变量与深色模式 |
| 7. JS 组件：弹窗与轮播 | Modal、Carousel、Dropdown、Collapse，免 jQuery |
| 8. 综合练习：Bootstrap 版个人主页 | 不写一行自定义 CSS，重做 CSS 教程的主页 |
学习建议
- 先修：HTML 与 CSS 基础（本教程默认你会写标签、认识 class；工具类里的 Flex 概念在 CSS 教程第 6 章讲过）。
- 别背类名：Bootstrap 类名非常多，记不住很正常。教程只讲最常用的，剩下查官方文档复制即可。
- 拖窗口感受响应式：每章示例都建议打开后拖动浏览器宽度，观察布局在断点处的变化——这是 Bootstrap 的精髓。
准备好了吗？从 第 1 章：Bootstrap 5 是什么 开始吧！