Bootstrap CSS加载失败主因是bootstrap.min.css未进入浏览器，需先检查Network面板中该文件是否返回200；常见原因包括CDN链接含Markdown语法、本地路径错误、协议混用、link顺序颠倒及遗漏rel="stylesheet"。
Bootstrap CSS 文件加载失败，90% 的情况不是你写错了类名，而是 bootstrap.min.css 根本没进浏览器——先确认它是否被成功请求并返回 200。
检查 Network 面板里 bootstrap.min.css 是否返回 200
打开开发者工具（F12）→ Network → 刷新页面 → 在筛选框输入 bootstrap.min.css → 看状态码：
- 显示
404：路径错、文件不存在、CDN 链接被 Markdown 包裹（比如写成[Bootstrap](https://cdn...)，浏览器会当成相对路径去本地找） - 显示
blocked:mixed-content：HTTPS 页面里引用了 HTTP 资源，或反过来；确保所有 CDN 地址以https://开头 - 显示
failed或空白：可能是国内网络拦截了该 CDN 节点（如 jsDelivr 某些时段不可靠），直接在地址栏粘贴链接测试是否能下载
CDN 引入时必须避开的三个硬伤
用 CDN 最省事，但错一个字符就白搭：
-
<link>标签里不能有方括号、圆括号、Markdown 语法，必须是纯 URL：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 别漏掉
rel="stylesheet"，否则浏览器不识别为样式表（Spring Boot 项目中尤其常见） - CDN 地址里的版本号要真实存在，比如
@5.3.3是有效版本，但@5.4.0可能还没发布，查 npm 官网或 jsDelivr 页面确认
本地路径引用时，相对路径从 HTML 文件位置算起
如果你把 bootstrap.min.css 放在 static/css/ 下，而 HTML 在项目根目录，那正确写法是：
<link rel="stylesheet" href="static/css/bootstrap.min.css">
常见错误包括：
- 写成
href="css/bootstrap.min.css"（少了一级static/） - 写成
href="../css/bootstrap.min.css"（上级目录不对，尤其在 Laravel、Flask 等框架中，HTML 渲染路径和文件物理路径不一致） - 在 Laravel 中没用
{{ asset('...') }}包裹，导致生成的路径是/css/bootstrap.min.css而非实际可访问路径
<link> 标签顺序错乱导致“看起来没生效”
Bootstrap CSS 必须在所有自定义 CSS 之前加载，否则你的规则会覆盖它的默认样式：
- ✅ 正确：
<link href="bootstrap.min.css">→<link href="style.css"> - ❌ 错误：
<link href="style.css">→<link href="bootstrap.min.css">（这时不是“没加载”，而是被你自己的.btn { color: red; }干掉了） - 构建工具（Vite/Webpack）里
import的顺序 ≠ 最终 HTML 中生效顺序，最终以<link>在 HTML 中的物理顺序为准
真正卡住人的地方，往往不是“怎么写”，而是“浏览器到底发没发那个请求”——Network 面板里一眼看不到 bootstrap.min.css，就别急着调 class 名或改 JS，先把它拽进页面再说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
