<p>Bootstrap 5 已彻底删除 .jumbotron 类，不再支持；需用 .container-fluid + bg-* + py-5/min-vh-100 等工具类组合实现巨幕效果，并注意背景图的 min-height、background-size: cover 和伪元素遮罩以保障可读性。</p>
Bootstrap 5 还有 .jumbotron 类吗？没有，直接删了
Bootstrap 5 在 2021 年正式发布时就移除了 .jumbotron 组件，不是弃用，是彻底删除。你在官方文档里搜不到它，bootstrap.min.css 里也没有对应样式。如果你升级到 v5 后发现页面上巨幕区域塌陷、样式丢失、控制台没报错但就是不渲染——大概率是因为还留着 class="jumbotron"，而这个类名现在纯属无效字符串。
用 .container-fluid + 工具类手搭巨幕，关键三步
替代方案不是“换一个类”，而是组合使用 Bootstrap 5 的工具类来还原视觉和功能。最常用且稳定的结构是：
-
.container-fluid或.container：决定是否全宽；流体容器更适合巨幕场景 -
.bg-*（如.bg-dark、.bg-light）或自定义background-image：背景色或图必须显式声明 -
.py-5或.min-vh-100：解决“高度为 0”问题——这是巨幕不可见的最常见原因
示例：
<div class="container-fluid py-5 bg-dark text-white"> <h1 class="display-4">欢迎来到首页</h1> <p class="lead">这是一段引导文案</p> </div>
注意：.py-5 提供上下内边距，但若内容少、又没设最小高度，小屏下可能显得局促；更稳妥的是加 .min-vh-100 实现全屏高度。
加背景图时，background-size: cover 和 min-height 缺一不可
很多人照搬 v4 写法，只加 style="background-image: url(./img/hero.jpg)"，结果图不显示。根本原因有两个：
- 容器没有高度：
<div>默认是 content-height，文字少就塌成一条线，图自然看不见 - 没设缩放行为：浏览器默认按原尺寸铺图，
cover才能等比缩放填满，center才能居中裁切
推荐写法（内联或独立 CSS）：
style="background-image: url(/img/hero.jpg); background-size: cover; background-position: center; min-height: 60vh;"
别用 height: 100vh——滚动条会触发重绘抖动；min-height 更安全。路径用绝对路径 /img/...，避免相对 HTML 文件路径引发的 404。
文字可读性差？别调 opacity，用 ::before 叠遮罩
复杂背景图上直接放白字，边缘细节多时极易看不清。错误做法是给整个容器加 opacity: 0.9，这会让文字也变透明。正确解法是伪元素遮罩：
.bg-hero::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -1;
}
然后给容器加 position: relative，再把文字颜色设为 #fff 或 hsl(0, 0%, 95%)。这样背景图保持清晰，文字始终高对比度，且不污染 HTML 结构。
v5 移除 Jumbotron 不是倒退，是把控制权交还给开发者；但代价是原来一行类名搞定的事，现在得自己配高度、背景、遮罩、响应式断点——这些细节不写进 CSS，就真只是“看起来像”。
