Jumbotron 是 Bootstrap 4 中的一个重要组件，用于创建引人注目的大屏幕内容区域，通常用于展示网站的主要信息、产品特色或号召性内容。它是一个灵活的容器，可以扩展整个视口宽度或保持在容器内。
Jumbotron 是一个轻量级、灵活的组件，可用于展示网站的主要内容和号召性操作。
<div class="jumbotron">
<h1 class="display-4">欢迎使用我们的服务！</h1>
<p class="lead">这是一个简单的大屏幕组件示例...</p>
<hr class="my-4">
<p>它使用通用类进行样式设置...</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>
Bootstrap 4 提供了多种方式来定制 Jumbotron 的外观和行为。
通过自定义 CSS 为 Jumbotron 添加背景颜色或渐变：
<style>
.jumbotron-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
</style>
<div class="jumbotron jumbotron-custom">
<!-- 内容 -->
</div>
通过背景图片创建视觉上更丰富的 Jumbotron：
<style>
.jumbotron-image-bg {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('path/to/image.jpg');
background-size: cover;
background-position: center;
color: white;
}
</style>
<div class="jumbotron jumbotron-image-bg">
<!-- 内容 -->
</div>
使用 .jumbotron-fluid 类创建占据整个视口宽度的 Jumbotron。
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">全宽 Jumbotron</h1>
<p class="lead">这个 Jumbotron 占据了整个屏幕宽度...</p>
<!-- 更多内容 -->
</div>
</div>
您可以在 Jumbotron 内部使用 Bootstrap 的网格系统来创建复杂的布局。
探索我们的核心功能
<div class="jumbotron" style="background: linear-gradient(...); color: white;">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="display-4">创新的解决方案</h1>
<p class="lead">我们提供最先进的技术解决方案...</p>
<a class="btn btn-light btn-lg" href="#" role="button">了解更多</a>
</div>
<div class="col-md-4 text-center">
<!-- 右侧内容 -->
</div>
</div>
</div>
</div>
您可以使用 Bootstrap 的排版和组件类来进一步定制 Jumbotron 的内容。
<div class="jumbotron" style="background: linear-gradient(...); color: white;">
<div class="container">
<div class="text-center">
<h1 class="display-3 font-weight-bold">超级优惠</h1>
<p class="lead">限时特惠...</p>
<div class="my-4">
<span class="badge badge-pill badge-light mr-2">新功能</span>
<!-- 更多徽章 -->
</div>
<hr class="my-4" style="border-color: rgba(255,255,255,0.3);">
<div class="row">
<!-- 卡片内容 -->
</div>
<div class="mt-4">
<a class="btn btn-light btn-lg mr-2" href="#" role="button">立即购买</a>
<a class="btn btn-outline-light btn-lg" href="#" role="button">了解更多</a>
</div>
</div>
</div>
</div>
Jumbotron 默认是响应式的，但您可以通过媒体查询进一步优化其在不同设备上的显示效果。
<div class="jumbotron">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-4">响应式设计</h1>
<p class="lead d-none d-md-block">这个 Jumbotron 在不同设备上...</p>
<p class="lead d-md-none">这个 Jumbotron 在移动设备上...</p>
<div class="mt-4">
<a class="btn btn-primary btn-lg mr-2" href="#" role="button">主要操作</a>
<a class="btn btn-outline-primary btn-lg d-none d-sm-inline-block" href="#" role="button">次要操作</a>
</div>
</div>
<div class="col-lg-4 text-center d-none d-lg-block">
<!-- 仅在大型设备上显示的内容 -->
</div>
</div>
</div>
</div>
恭喜！您已经学习了Bootstrap 4 Jumbotron组件的核心概念和功能。Jumbotron是创建引人注目内容区域的强大工具，掌握这些技巧将帮助您设计出更具吸引力的网站。
继续学习下一章：Bootstrap 4 组件