1. Bootstrap 5 是什么

这是什么：Bootstrap = 一套开箱即用的前端组件库，把按钮、导航、卡片、弹窗这些常见界面预先写成 CSS 类和 JS 插件，给标签加类名就能直接用。

为什么用：CSS 教程里你一字一句手写导航栏、卡片阴影、媒体查询，能做出来，但慢。Bootstrap 把这些「每个网站都要写一遍」的东西做成了标准件——加一个 class="card"，阴影圆角内边距全有了；加一个 class="col-md-4"，手机自动堆叠、电脑三列排布，媒体查询都不用自己写。

如何用：本章先建立三个认知：它是什么、v5 和 v4 有什么不同、什么项目适合用。不写代码，下一章立刻上手。

1.1 一句话认识 Bootstrap

Bootstrap 是 Twitter 的两位工程师 Mark Otto 和 Jacob Thornton 于 2011 年开源的前端框架，名字取自「启动容器」——帮你的项目快速启动。它是 GitHub 上获得 star 最多的前端项目之一，从博客、活动页到后台管理系统，大量网站用它打底。

它提供三样东西：

组成	内容	你做什么
CSS 框架	排版、栅格布局、组件样式、工具类	给标签加 class
JS 插件	弹窗、轮播、下拉、折叠等交互	加 data 属性，一行 JS 都不用写
图标库	Bootstrap Icons（独立项目，按需引入）	加 class 或用 SVG

1.2 它和手写 CSS、和 Vue/React 什么关系

和手写 CSS：Bootstrap 本身就是别人写好的 CSS。你用它是「在样式库里挑现成的」，手写是「从零造样式」。底层机制完全一样——class 选择器、盒模型、Flex——你学过的 CSS 知识全部适用。
和 Vue / React：不是一个维度的东西。Vue/React 管数据和界面怎么联动（JS 框架），Bootstrap 管界面长什么样（CSS 组件库），两者可以叠着用：Vue 项目里照样可以引 Bootstrap。
和 jQuery：Bootstrap 4 的 JS 插件依赖 jQuery；Bootstrap 5 彻底移除了 jQuery 依赖，改用原生 JavaScript——所以你学完 jQuery 再学它，不会有「再装个库」的负担。

1.3 Bootstrap 5 的三个关键变化

当前稳定版本是 v5.3.x（5.3 系列最后一个带新特性的版本，截至 2026 年 10 月最新补丁为 5.3.8）。相比统治多年的 v4，v5 的核心变化：

不再依赖 jQuery：全部 JS 组件用原生 ES6 重写，引入一个 bundle 文件即可。
移动端优先 + 新增 xxl 断点：栅格断点从 5 个变 6 个，超宽屏（≥1400px）也有专属布局。
拥抱 CSS 变量：5.3 起内置浅色/深色两套主题，一个 data-bs-theme="dark" 属性整页变深色。

其他变化：不再支持 IE（只支持现代浏览器）、新增 RTL（从右到左语言）支持。官方分支已经在开发 Bootstrap 6，但 v5 仍是当前主流，本教程全程用 v5。

断点、CSS 变量这些词现在还不用深究，第 3 章和第 6 章会各自展开。

1.4 什么时候该用 Bootstrap

适合：

快速出活：作品集、活动页、后台原型、课程作业——要「像样」不要「独特」
一个人全栈：前端弱的后端同学，加个 CDN 页面立刻整齐
响应式刚需：需要同时适配手机和电脑，又不想自己算断点

不适合：

强品牌视觉：设计要求「一眼认出是你家」的独特页面，Bootstrap 的「模板感」会成为负担
极致性能：全站 CSS 有几十 KB，只用其中 10% 的话，需要裁剪配置（进阶话题，本教程不展开）
已经上了 Tailwind / 组件库生态：同一类方案，选一个深入即可

1.5 小结

Bootstrap = CSS 框架 + JS 插件的组件库，加类名即用
v5 三大变化：去 jQuery、加 xxl 断点、支持深色模式
定位「快」和「响应式」，不追求「独特视觉」

下一章我们一行 CDN 把 Bootstrap 请进页面，做出第一个真正响应式的网页。