<p>Bootstrap 5 已彻底删除 .jumbotron 类，代码中不存在该类，添加后样式不生效；可用 .container-fluid + .min-vh-100 + .bg-* 组合替代，并注意背景图需配合 background-size: cover 和容器高度控制。</p>
Bootstrap 5 已彻底删除 .jumbotron 类，不是弃用，是代码里根本没它了——你加了也无效，页面不会报错，但样式完全不生效。
为什么加了 class="jumbotron" 却没效果
常见现象：升级到 Bootstrap 5 后，原来巨幕区域突然塌成一条线、文字挤在一起、背景色消失、高度为 0。这不是浏览器兼容问题，也不是 CDN 没加载成功，而是 .jumbotron 这个类名在 bootstrap.min.css 中已被物理删除。
- 官方文档搜不到该组件，连“Deprecated”提示都没有，直接下架
- DevTools 里能看到 class 属性存在，但 computed styles 中无任何规则匹配
- 如果你用的是自定义构建（如 SCSS），
_jumbotron.scss文件在 v5 源码中已不存在
用 .container-fluid + 工具类还原巨幕的三要素
替代方案不是“换一个类”，而是组合控制容器尺寸、背景、垂直空间这三项。漏掉任意一项，都会导致视觉断裂。
-
.container-fluid或.container：决定是否全宽；流体容器更适合作为巨幕外层 -
.bg-*（如.bg-dark）或自定义background-image：背景必须显式声明，否则默认透明 -
.min-vh-100或.py-5：解决“高度为 0”这个最常见失效原因；仅靠内边距在内容少时不可靠，.min-vh-100才能保证至少一屏高
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container-fluid min-vh-100 bg-dark text-white d-flex align-items-center">
<div class="container py-5">
<h1 class="display-4">欢迎来到首页</h1>
<p class="lead">这是一段引导文案</p>
</div>
</div>
加背景图时 min-height 和 background-size: cover 缺一不可
很多人复制旧代码：style="background-image: url(./img/hero.jpg)"，结果图不显示。根本不是路径错了，而是两个 CSS 层级缺失：
- 容器没有高度：
<div>默认是 content-height，文字少就塌成一条线，图自然渲染不出来 - 没设缩放行为：浏览器默认按原尺寸铺图，必须加
background-size: cover才能等比缩放填满，background-position: center防止偏移
推荐写法（内联 style 更可控）：
<div class="container-fluid min-vh-100"
style="background-image: url(./img/hero.jpg);
background-size: cover;
background-position: center;">
</div>
想加斜边或遮罩？别用伪元素覆盖 <video>
如果用视频当背景，background-video 是无效 CSS 属性——规范里根本不存在，浏览器静默忽略。必须用真实 <video> 元素，并满足以下条件：
- 父容器加
position-relative vh-100，且额外加min-height: 100vh（防 Safari 地址栏隐藏后视口收缩） -
<video>加position-absolute top-0 start-0 w-100 h-100，再内联style="object-fit: cover;" - 必须带
muted autoplay loop playsinline，缺一不可，否则 iOS/Safari 直接拒绝播放 - 遮罩层不能写在
<video>的 background 上，得是同级<div class="position-absolute w-100 h-100 bg-black opacity-50"></div>
容易被忽略的一点：视频首帧要用 poster 属性兜底，否则加载瞬间白屏；截图建议用视频第 1 帧导出，尺寸一致才能无缝衔接。
