html语义化、css盒模型、js插件调用及移动优先原则是掌握bootstrap的前提；需手写语义标签、理解类名对应样式规则、能调试dom与事件，并明确栅格从超小屏起效。
HTML 结构和语义化标签必须能手写
Bootstrap 本身不改变 HTML 的底层逻辑，它只是给已有标签加样式和行为。如果你连 <div>、<code><section></section>、<form></form>、<button></button> 的基本用途和嵌套规则都常写错，用 Bootstrap 时就会频繁出现布局错位、表单失效、响应式断点不生效等问题。
实操建议：
- 能不查文档写出一个含
<header></header>、<nav></nav>、<main></main>、<footer></footer>的页面骨架 - 知道
<label for="xxx"></label>和<input id="xxx">必须配对，否则 Bootstrap 表单校验会静默失败 - 理解
<button></button>默认是type="submit"，在模态框或轮播控制里乱用会导致意外提交
CSS 盒模型与选择器要能调试定位
Bootstrap 的 class 是纯样式钩子，比如 .container 靠 max-width 和 margin: 0 auto 居中，.col-md-6 本质是一组 flex 或 float 规则。你不需要手写整套栅格，但得能看懂开发者工具里某个元素为什么没占满、为什么有空白边、为什么响应式没切换。
常见错误现象：
- 加了
.row但内容溢出容器 → 实际是父级缺.container或用了.container-fluid却没设width上限 -
.btn-primary颜色不对 → 很可能是自定义 CSS 用!important覆盖了 Bootstrap 的background-color且未重置border - 移动端菜单图标（三杠）不显示 → 往往是漏写了
<meta name="viewport">，导致媒体查询完全不触发
JavaScript 基础能力要能看懂插件调用逻辑
Bootstrap 5 已移除 jQuery 依赖，但它的 JS 插件（如 Modal、Dropdown、Toast）仍需你理解 DOM 操作和事件机制。不是让你手写轮播图，而是得明白为什么 new bootstrap.Modal(document.getElementById('xxx')) 要传节点、为什么 show() 方法要等 DOM 加载完再执行。
使用场景与参数差异：
- 初始化模态框：必须确保
#xxx元素已存在于 DOM 中，否则报错TypeError: Cannot read properties of null - 动态绑定下拉菜单：
data-bs-toggle="dropdown"是声明式写法，但若用 JS 初始化，得手动调用bootstrap.Dropdown.getOrCreateInstance() - 关闭提示框后想清空表单：不能只监听
hidden.bs.modal，还得检查事件对象里的relatedTarget是否为取消按钮，避免误清
别跳过“移动优先”这个设计前提
Bootstrap 的所有栅格类（如 .col-sm-6、.col-lg-4）默认从最小屏开始定义，不是“给大屏写，小屏自动缩”。很多人卡在“为什么我写了 .col-md-8，手机上却变成一列堆叠？”，其实是因为没写 .col-12 或 .col-sm-12，而 Bootstrap 默认在超小屏（
性能与兼容性影响：
- 不写任何列类（比如只用
.col），在 Flexbox 模式下会均分，但在 IE10/11 中可能回退到display: block导致错乱 - 混用旧版类名（如
.col-xs-4）在 Bootstrap 5 中已彻底移除，会直接失效，控制台无报错，只有样式丢失 - 自定义断点时改
$grid-breakpoints变量，必须同步更新所有媒体查询和 JS 插件的尺寸判断逻辑，否则轮播、折叠等组件行为会脱节
<meta name="viewport" content="width=device-width, initial-scale=1"> 这一行——它不在 Bootstrap 文档显眼位置，但没它，整个响应式体系就形同虚设。
