内容摘要：打开菜鸟教程的 Bootstrap5 页面，第一眼看到的是左侧那排导航——布局、容器、网格、表单、按钮、导航栏，一路排下去。右侧内容区干干净净，每段代码都能直接点“运行实例”看效果。这个设计其实挺聪明

打开菜鸟教程的菜鸟 Bootstrap5 页面，第一眼看到的教程是左侧那排导航——布局、容器、菜鸟网格、教程表单、菜鸟按钮、教程导航栏，菜鸟一路排下去。教程右侧内容区干干净净，菜鸟每段代码都能直接点“运行实例”看效果。教程这个设计其实挺聪明：你不需要装环境，菜鸟不需要配 webpack，教程浏览器里就能把 Bootstrap5 的菜鸟类名试个遍。

Bootstrap5 和 Bootstrap4 最大的教程区别，是菜鸟 jQuery 被踢出去了。以前用 Bootstrap4 写个下拉菜单，得先引 jQuery，再引 popper.js，最后才是 bootstrap.js，顺序错了就报错。Bootstrap5 只留了 popper.js 和 bootstrap.js 两个文件，体积小了一圈。菜鸟教程在“Bootstrap5 安装”那一节写得很直白：CDN 引入三行代码，或者下载编译好的 CSS 和 JS。没有 npm、没有构建工具，对新手来说门槛低了不少。

网格系统还是那套 container / row / col。但菜鸟教程的示例给得密，比如 col-12 col-md-6 col-lg-4 这种响应式写法，直接放在一个三列卡片布局里演示。你改一下浏览器窗口宽度，卡片从三列变两列再变一列，肉眼能看见断点生效。这比看文档里干巴巴的表格强。有个细节：Bootstrap5 新增了 xxl 断点，1400px 以上。菜鸟教程在断点表格里标了出来，但示例用得少，估计是大部分人的屏幕还没那么宽。

表单部分变化不小。Bootstrap4 的 form-group 和 form-control 搭配用，Bootstrap5 把 form-group 删了，改用 mb-3 这种间距工具类来控制。菜鸟教程的“Bootstrap5 表单”页面里，每个输入框外面包一层 div class="mb-3"，下面跟 label 和 input。刚开始可能觉得啰嗦，但写多了会发现间距工具类更灵活，想调多少调多少，不用被固定的 form-group 绑住。

按钮那块，菜鸟教程列了 btn-primary 到 btn-dark 八种颜色，还有 btn-outline-* 系列。实际项目里用得最多的其实是 btn-sm 和 btn-lg 控制大小，以及 disabled 属性做禁用态。有个坑：btn 类必须加，光写 btn-primary 没样式。菜鸟教程的示例里都带上了，但新手容易漏。

导航栏组件值得单独说。Bootstrap5 的 navbar 默认是响应式的，navbar-expand-lg 表示大屏展开、小屏折叠成汉堡菜单。菜鸟教程的示例里用了 data-bs-toggle="collapse"，注意是 data-bs- 不是 data-，因为 Bootstrap5 去掉了 jQuery，所有 data 属性都加了 bs 前缀。这个改动挺关键，旧教程里抄来的代码如果没改前缀，菜单点不开。

工具类这块，Bootstrap5 的 API 命名更一致了。m 是 margin，p 是 padding，t/b/s/e 对应 top/bottom/start/end。菜鸟教程的“Bootstrap5 工具类”页面把 mt-3、pb-2、ms-auto 这类写法列成表格，旁边配一个可视化的间距示意图。比纯文字好懂。不过工具类太多，记不住很正常。我的习惯是打开菜鸟教程的页面，用浏览器的查找功能搜关键词，比如“margin”或者“flex”，比翻文档快。

菜鸟教程的 Bootstrap5 部分没有讲 Sass 变量定制。这算个短板。实际项目里想改主题色，得自己编译 _variables.scss。但话说回来，对于只想快速搭个页面、不打算深度定制的开发者，菜鸟教程给的东西已经够用了。它把最常用的组件和类名筛了一遍，省得你在官方文档的海洋里瞎逛。

最后提一句：菜鸟教程的“运行实例”用的是 iframe 嵌入，有些涉及 JS 的组件（比如模态框、轮播）在 iframe 里可能受限于沙箱策略，点按钮没反应。遇到这种情况，把代码复制到本地 HTML 文件里再试。别以为是教程写错了。