Bootstrap Jumbotron
概述
Jumbotron 是一个轻量级、灵活的组件，用于展示关键内容或信息。它通常用于网站的首页横幅、特色内容展示或重要公告。
注意：在 Bootstrap 5 中，Jumbotron 组件已被移除，但我们可以使用工具类轻松重建类似的效果。
Bootstrap 4 中的 Jumbotron
在 Bootstrap 4 中，Jumbotron 是一个预定义的组件：
html
<!-- Bootstrap 4 Jumbotron -->
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">这是一个简单的 Jumbotron 样式组件，用于突出显示特色内容或信息。</p>
<hr class="my-4">
<p>它使用工具类来排版和间距内容。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>Bootstrap 5 中重建 Jumbotron
在 Bootstrap 5 中，我们使用工具类来创建类似的效果：
基本 Jumbotron
html
<div class="bg-light p-5 rounded-lg m-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">这是一个使用 Bootstrap 5 工具类重建的 Jumbotron 效果。</p>
<hr class="my-4">
<p>它使用背景、内边距和圆角类来实现样式。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>全宽 Jumbotron
html
<div class="bg-primary text-white p-5">
<div class="container">
<h1 class="display-4">全宽 Jumbotron</h1>
<p class="lead">这个 Jumbotron 跨越整个视口宽度，内容在容器中居中。</p>
<hr class="my-4 border-white">
<p>适合用作页面横幅或重要公告。</p>
<a class="btn btn-light btn-lg" href="#" role="button">开始使用</a>
</div>
</div>不同样式的 Jumbotron
渐变背景 Jumbotron
html
<div class="bg-primary bg-gradient text-white p-5 rounded">
<h1 class="display-4">渐变背景</h1>
<p class="lead">使用渐变背景创建更现代的视觉效果。</p>
<a class="btn btn-light btn-lg" href="#" role="button">探索更多</a>
</div>图像背景 Jumbotron
html
<div class="position-relative p-5 text-center text-white rounded"
style="background-image: url('background.jpg'); background-size: cover; background-position: center;">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50 rounded"></div>
<div class="position-relative">
<h1 class="display-4">图像背景</h1>
<p class="lead">在美丽的背景图像上展示内容。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">查看详情</a>
</div>
</div>卡片样式 Jumbotron
html
<div class="card border-0 shadow-lg">
<div class="card-body p-5 text-center">
<h1 class="display-4 card-title">卡片样式</h1>
<p class="lead card-text">使用卡片组件创建带阴影的 Jumbotron 效果。</p>
<hr class="my-4">
<p class="card-text">这种样式更加精致，适合现代设计。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">立即体验</a>
</div>
</div>实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Jumbotron 示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.hero-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-bg {
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
}
.demo-img {
background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="container-fluid p-0">
<!-- 主要横幅 -->
<div class="hero-bg text-white p-5 text-center">
<div class="container">
<h1 class="display-3 fw-bold mb-4">欢迎来到我们的网站</h1>
<p class="lead fs-4 mb-4">
这里是一个展示 Bootstrap Jumbotron 效果的示例页面，
使用现代化的设计和渐变背景。
</p>
<hr class="my-4 border-white opacity-25">
<p class="fs-5 mb-4">
探索我们的产品和服务，发现更多可能性。
</p>
<a class="btn btn-light btn-lg me-3" href="#" role="button">
<svg width="16" height="16" fill="currentColor" class="bi bi-play-fill me-2" viewBox="0 0 16 16">
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
开始使用
</a>
<a class="btn btn-outline-light btn-lg" href="#" role="button">了解更多</a>
</div>
</div>
</div>
<div class="container my-5">
<!-- 特色内容 -->
<div class="row mb-5">
<div class="col-lg-8 mx-auto">
<div class="bg-light p-5 rounded-3 text-center">
<h2 class="display-5 fw-bold">我们的特色</h2>
<p class="lead">
使用 Bootstrap 5 的工具类，我们可以轻松创建各种样式的 Jumbotron 效果。
</p>
<div class="row mt-4">
<div class="col-md-4 mb-3">
<div class="p-3">
<svg width="48" height="48" fill="currentColor" class="bi bi-lightning-charge text-primary mb-3" viewBox="0 0 16 16">
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41 4.157 8.5z"/>
</svg>
<h5>快速</h5>
<p class="text-muted">快速构建响应式布局</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3">
<svg width="48" height="48" fill="currentColor" class="bi bi-shield-check text-success mb-3" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
</svg>
<h5>安全</h5>
<p class="text-muted">遵循最佳安全实践</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3">
<svg width="48" height="48" fill="currentColor" class="bi bi-heart text-danger mb-3" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<h5>易用</h5>
<p class="text-muted">简单易用的设计</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产品展示 -->
<div class="row mb-5">
<div class="col-md-6 mb-4">
<div class="card h-100 border-0 shadow">
<div class="demo-img rounded-top">
产品图片
</div>
<div class="card-body p-4">
<h3 class="card-title">产品 A</h3>
<p class="card-text lead">这是我们的主打产品，具有出色的性能和用户体验。</p>
<p class="card-text">功能丰富，操作简单，适合各种使用场景。</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100 border-0 shadow">
<div class="demo-img rounded-top">
产品图片
</div>
<div class="card-body p-4">
<h3 class="card-title">产品 B</h3>
<p class="card-text lead">专为企业用户设计的高级版本，提供更多专业功能。</p>
<p class="card-text">支持团队协作，数据分析，安全可靠。</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
</div>
</div>
<!-- 行动号召 -->
<div class="feature-bg text-white p-5 rounded-3 text-center">
<h2 class="display-6 fw-bold mb-4">准备开始了吗？</h2>
<p class="lead fs-5 mb-4">
加入我们，体验最好的产品和服务。
</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
<button class="btn btn-light btn-lg px-4 me-md-2" type="button">免费试用</button>
<button class="btn btn-outline-light btn-lg px-4" type="button">联系我们</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>响应式 Jumbotron
创建在不同设备上都能良好显示的响应式 Jumbotron：
html
<div class="bg-primary text-white p-3 p-md-5 rounded">
<div class="container">
<h1 class="display-6 display-md-4 fw-bold">响应式标题</h1>
<p class="lead fs-6 fs-md-4">
这个 Jumbotron 在不同屏幕尺寸下会调整字体大小和内边距。
</p>
<div class="d-grid gap-2 d-md-flex">
<a class="btn btn-light btn-lg" href="#" role="button">主要按钮</a>
<a class="btn btn-outline-light btn-lg" href="#" role="button">次要按钮</a>
</div>
</div>
</div>最佳实践
- 保持内容简洁：Jumbotron 应该突出最重要的信息
- 使用合适的对比度：确保文本在背景上清晰可读
- 响应式设计：在不同设备上测试显示效果
- 行动号召：包含明确的行动按钮
- 视觉层次：使用不同的字体大小创建清晰的信息层次
下一步
现在你已经掌握了如何在 Bootstrap 5 中创建 Jumbotron 效果，接下来我们将学习信息提示框组件。