Bootstrap 5 可用 d-flex + min-vh-100 实现全屏撑开与垂直居中，配合 display-1.fw-bold 控制标题、text-muted 设副文案、img-fluid.mx-auto.d-block+固定高度防图片塌陷，无需自定义 CSS 即可构建响应式 404 页面。
用 Bootstrap 5 的栅格和工具类快速搭出响应式 404 页面
Bootstrap 本身不提供现成的 404 页面组件，但它的 container、row、col 和 text-center 等工具类足够支撑一个简洁、居中、适配手机的错误页——不用写一行 CSS 就能搞定。
关键不是“套模板”，而是控制内容垂直居中 + 视觉留白 + 错误信息层级清晰。移动端尤其要注意 vh-100（占满视口高度）配合 d-flex flex-column justify-content-center，否则文字会贴顶或截断。
-
container必须包在body直接子级，避免外层 padding 干扰居中逻辑 - 别用
h1直接写 “404”，建议用<span class="display-1 fw-bold text-muted">404</span>，语义更准，且display-1在小屏自动缩放 - 按钮必须带
btn btn-primary，否则默认链接样式在暗色背景或高对比模式下可访问性差
如何让 404 文字在各种屏幕尺寸下都真正垂直居中
单纯用 mt-5 或 pt-5 是靠猜，一换设备就偏移。正确做法是把整个内容区设为 Flex 容器，并启用垂直对齐。
常见错误：给 body 加 min-height: 100vh 后没加 display: flex，导致 justify-content: center 失效；或者用了 align-items: center 却忘了父容器高度未撑开。
- 根容器用
<div class="d-flex flex-column min-vh-100">（注意是 <code>min-vh-100，不是vh-100，防内容超长时溢出） - 内部包裹层加
class="flex-grow-1 d-flex flex-column justify-content-center"，确保即使内容少也能居中 - 避免在
h1或p上硬写style="margin-top: 20vh"—— 这类内联样式无法响应式 - CDN 引入只需一行：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> - 如果项目已用 Sass，别重写
$theme-colors—— 默认的primary足够传达“可点击”语义 - 不要为了“个性化”覆盖
.bg-light或.text-dark，高对比度模式下这些基础类才最可靠 - 静态托管（如 GitHub Pages、Vercel）需配置
_error.html或404.html文件，并确保服务器对该路径返回 404 状态码 - Apache 用户检查
.htaccess是否有ErrorDocument 404 /404.html，且该文件在网站根目录 - Nginx 用户确认
error_page 404 /404.html配置后，/404.html路径可被公开访问且不重定向（重定向会导致状态码变成 302）
为什么直接引入 Bootstrap CSS 就够，不需要 JS 或自定义主题
404 页面本质是静态展示，不需要轮播、下拉、模态框等交互功能。Bootstrap 的 CSS 文件（尤其是 bootstrap.min.css）已包含所有排版、间距、颜色和响应式断点规则。
引入完整 JS 包（bootstrap.bundle.min.js）反而可能触发不必要的初始化行为，比如自动聚焦到某个元素，影响屏幕阅读器体验。
部署时容易被忽略的路径和状态码问题
页面长得再漂亮，返回的 HTTP 状态码是 200，搜索引擎和爬虫仍会把它当正常页面索引。真正的 404 页面必须由服务器返回 404 Not Found 状态码。
常见疏漏：前端路由（如 React Router）捕获了 /xxx 路径并渲染了 404 组件，但服务器实际返回的是 200 —— 这不算合规的 404 页面。
字体、图标、CSS 路径全部用相对路径（如 ./bootstrap.min.css），避免跨域或 404 嵌套。
