Bootstrap 基于 HTML5 语义结构运行，需以 开头、正确使用语义标签和栅格嵌套规则，否则响应式与组件功能将失效。

Bootstrap 本身不是 HTML5 的替代品，而是基于 HTML5 语义化结构构建的前端框架。直接用 Bootstrap 布局，前提是你的页面已按 HTML5 规范写结构——否则响应式、栅格、组件行为都会出问题。

HTML5 结构必须写对，Bootstrap 才能正常工作

Bootstrap 的栅格系统（.container、.row、.col）和组件（如 nav、main、footer）依赖 HTML5 语义标签和正确的文档类型。如果漏掉 或混用 XHTML 闭合写法（如
），部分 CSS 重置和媒体查询可能失效。

• 必须以 开头，且无任何前置内容（包括空格、注释）
• 标签需带 lang 属性，例如
• 避免嵌套
  在

  外再套一层非语义

  ，这会破坏栅格计算精度

• Bootstrap 5+ 已移除 jQuery 依赖，但若你手动引入了旧版 JS（如 v4.6），仍需确保 在 前加载

Bootstrap 栅格在 HTML5 中的正确嵌套方式

HTML5 的语义容器（

、

、

）和 Bootstrap 的布局类要分层清晰。常见错误是把 .row 直接扔进

里却不加 .container 或 .container-fluid，导致横向溢出或断点失效。

• .container 或 .container-fluid 必须作为 .row 的直接父元素
• .row 只能包含 .col*，不能直接放文本、按钮或其他组件（除非用 .col-auto 包裹）
• HTML5 的
  

  可以包裹整组 .container > .row > .col，但不要让 .row 跨越多个语义块边界

• 移动端优先：所有列类（如 .col-md-8）默认在 xs 断点下占满一行，无需额外写 .col-12

常见错误：CSS 冲突与 HTML5 表单控件渲染异常

Bootstrap 会对 HTML5 新增的表单类型（、）自动添加样式，但若你自定义了 appearance 或重置了 border，会导致日期选择器、邮箱校验图标消失，甚至 iOS 上 type="number" 输入框无法唤起数字键盘。

立即学习“前端免费学习笔记（深入）”；

• 禁用用户代理样式时，别全局写 * { -webkit-appearance: none; }，应限定范围，例如只作用于 .custom-select
• 使用 时，Bootstrap 会覆盖其默认放大镜图标；如需保留，得手动补 background-image 并调整 padding-right
• HTML5 的 required 和 pattern 属性仍有效，但 Bootstrap 表单验证（.was-validated）需要手动触发表单提交或调用 checkValidity()

                   
     
       
         
           
Logo
         
         
                    
       
     
   
 
 
 
 
 
主内容区
 
这是符合 HTML5 语义且被 Bootstrap 栅格正确约束的内容。