bootstrap需显式引入css和js文件才能生效；未加载时class无效，应通过开发者工具network面板查200状态、console查报错、elements查样式来源，并严格遵循container→row→col嵌套结构。
Bootstrap 不是 HTML 的一部分，也不能靠 `html>` 标签“启用”。它是一套独立的 CSS 和 JavaScript 工具集，必须**显式引入**才能生效。没引入，写再多 class="btn btn-primary" 也只会显示为普通文字——浏览器根本不知道这些类是什么。
怎么确认 Bootstrap 真的加载成功了？
别只看 HTML 结构是否写对，先盯住浏览器开发者工具（F12）的 Network 面板和 Console 面板：
- Network 中检查
bootstrap.min.css和bootstrap.min.js是否返回 200，有没有 404 或 CORS 错误 - Console 里有没有报
TypeError: Bootstrap's JavaScript requires jQuery（Bootstrap 4 及更早版本）或ReferenceError: bootstrap is not defined（Bootstrap 5+ 没引入 JS 文件） - 在 Elements 面板里点开一个用了
container的元素，右侧 Styles 面板里搜max-width，看是不是来自bootstrap.min.css
CDN 引入时最常见的路径错误
很多人复制 CDN 链接后直接粘贴进 <link>，却忽略版本兼容性和依赖顺序。尤其是 Bootstrap 5 已移除 jQuery 依赖，但网上大量旧教程仍混用：
- Bootstrap 5.3+：用
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css，JS 部分用https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js（含 Popper） - Bootstrap 4.6：必须先引入 jQuery（如
https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js），再引入 Bootstrap JS - 千万别把 CSS 放
里，也别把 JS 放顶部——CSS 必须在，JS 推荐放前
为什么写了 col-6 却不换行、不等宽？
网格系统失效，90% 是因为没套 container 或 row。Bootstrap 的栅格不是“写上就灵”，它依赖严格的嵌套结构：
-
container或container-fluid是最外层容器（提供 padding 和 max-width） - 所有
col-*必须放在row内部，否则flex布局不会触发 -
col-6在小屏（row，它只是个普通块级元素，不会参与 flex 分配 - 示例正确写法：
<div class="container"> <div class="row"> <div class="col-6">左</div> <div class="col-6">右</div> </div> </div>
自定义样式为什么总被 Bootstrap 覆盖？
不是你的 CSS 写错了，是优先级输了。Bootstrap 的选择器普遍带 .container、.row、.col-* 等多层 class，天然比单个 .my-btn 权重高。
- 避免用
!important——它会让后续维护变成噩梦 - 提升你自己的选择器权重：比如把
.my-btn改成.container .my-btn或div.my-btn - 更稳妥的做法：在引入 Bootstrap CSS 之后，再引入你自己的 CSS 文件（顺序即优先级）
- 如果改的是变量（如主题色），Bootstrap 5 推荐用 CSS 自定义属性（
--bs-primary），而不是覆盖 class
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
