Bootstrap 基于 HTML5 语义结构运行，需以 <!DOCTYPE html> 开头、正确使用语义标签和栅格嵌套规则，否则响应式与组件功能将失效。
Bootstrap 本身不是 HTML5 的替代品，而是基于 HTML5 语义化结构构建的前端框架。直接用 Bootstrap 布局，前提是你的页面已按 HTML5 规范写结构——否则响应式、栅格、组件行为都会出问题。
HTML5 结构必须写对，Bootstrap 才能正常工作
Bootstrap 的栅格系统（.container、.row、.col）和组件（如 nav、main、footer）依赖 HTML5 语义标签和正确的文档类型。如果漏掉 <!DOCTYPE html> 或混用 XHTML 闭合写法（如 <br/>），部分 CSS 重置和媒体查询可能失效。
- 必须以
<!DOCTYPE html>开头，且无任何前置内容（包括空格、注释） -
<html>标签需带lang属性，例如<html lang="zh-CN"> - 避免嵌套
<div class="container">在<header>外再套一层非语义<div>，这会破坏栅格计算精度 - Bootstrap 5+ 已移除 jQuery 依赖，但若你手动引入了旧版 JS（如 v4.6），仍需确保
<script>在</body>前加载
Bootstrap 栅格在 HTML5 中的正确嵌套方式
HTML5 的语义容器（<header>、<main>、<aside>）和 Bootstrap 的布局类要分层清晰。常见错误是把 .row 直接扔进 <nav> 里却不加 .container 或 .container-fluid，导致横向溢出或断点失效。
-
.container或.container-fluid必须作为.row的直接父元素 -
.row只能包含.col*，不能直接放文本、按钮或其他组件（除非用.col-auto包裹） - HTML5 的
<section>可以包裹整组.container > .row > .col，但不要让.row跨越多个语义块边界 - 移动端优先：所有列类（如
.col-md-8）默认在xs断点下占满一行，无需额外写.col-12
常见错误：CSS 冲突与 HTML5 表单控件渲染异常
Bootstrap 会对 HTML5 新增的表单类型（<input type="email">、<input type="date">）自动添加样式，但若你自定义了 appearance 或重置了 border，会导致日期选择器、邮箱校验图标消失，甚至 iOS 上 type="number" 输入框无法唤起数字键盘。
立即学习“前端免费学习笔记（深入）”；
- 禁用用户代理样式时，别全局写
* { -webkit-appearance: none; }，应限定范围，例如只作用于.custom-select - 使用
<input type="search">时，Bootstrap 会覆盖其默认放大镜图标；如需保留，得手动补background-image并调整padding-right - HTML5 的
required和pattern属性仍有效，但 Bootstrap 表单验证（.was-validated）需要手动触发表单提交或调用checkValidity()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 + Bootstrap 5 示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bg-light border-bottom">
<div class="container">
<div class="row align-items-center py-3">
<div class="col-md-3">
<h1 class="h4 mb-0">Logo</h1>
</div>
<div class="col-md-9">
<nav class="d-flex justify-content-end">
<a href="#" class="btn btn-outline-primary me-2">登录</a>
<a href="#" class="btn btn-primary">注册</a>
</nav>
</div>
</div>
</div>
</header>
<p><main class="container my-4">
<div class="row">
<div class="col-lg-8">
<article>
<h2>主内容区</h2>
<p>这是符合 HTML5 语义且被 Bootstrap 栅格正确约束的内容。</p>
</article>
</div>
<aside class="col-lg-4">
<div class="card">
<div class="card-body">
<h3 class="h5 card-title">侧边栏</h3>
<p>使用 <code><aside></code> 标签明确语义。</p>
</div>
</div>
</aside>
</div>
</main></p><p><footer class="bg-dark text-white py-4">
<div class="container">
<p class="mb-0">© 2024 示例页。所有结构均遵循 HTML5 规范。</p>
</div>
</footer></p><p><script src="<a href="https://www.php.cn/link/d52ce794c793bf695a5f1d53bdc94097">https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script></a>;
</body>
</html>最易被忽略的一点：Bootstrap 的 CSS 是移动优先的，但它不会自动修复你写的非法 HTML5 结构。比如把 <main> 放在 <header> 外面却没包 <body>，或者用 <section> 替代 <div class="container"> 试图“语义化布局”——结果只是让栅格塌陷、断点错乱。语义和布局是两层事，别指望一个标签同时扛两份责任。
