Bootstrap 4 Jumbotron - 创建引人注目的页面头部

最后编辑于2025-04-14 12:41:14.3848468 +0800 CST

Bootstrap 4 Jumbotron

Jumbotron（超大屏幕）是Bootstrap中一个轻量级、灵活的组件，用于在网站中展示重要内容。它通常用作网站的首页大屏幕、营销信息或重要公告区域，通过创建一个大的灰色背景框，可以吸引用户的注意力。

基本的Jumbotron

要创建一个基本的Jumbotron组件，只需要在<div>元素上添加.jumbotron类：

html 
1<div class="jumbotron">
2  <h1>菜鸟教程</h1> 
3  <p class="lead">学的不仅是技术，更是梦想！！！</p>
4  <hr class="my-4">
5  <p>它使用实用程序类来排版和间距内容。</p>
6  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
7</div>

上面的代码会创建一个带有内边距和圆角的灰色背景区域，里面可以包含任何HTML元素，包括标题、段落、按钮等Bootstrap组件。

全屏幕的Jumbotron

如果你想创建一个没有圆角并且宽度为100%的全屏幕Jumbotron，可以使用.jumbotron-fluid类，并在其中添加一个.container或.container-fluid类的<div>：

html 
1<div class="jumbotron jumbotron-fluid">
2  <div class="container">
3    <h1>菜鸟教程</h1> 
4    <p class="lead">学的不仅是技术，更是梦想！！！</p>
5    <a class="btn btn-success btn-lg" href="#" role="button">开始学习</a>
6  </div>
7</div>

.jumbotron-fluid类会移除圆角并应用全宽度，而内部的.container类会控制内容的宽度和居中。

自定义Jumbotron样式

Jumbotron可以根据需要进行自定义，以下是一些常见的自定义选项：

添加背景图片

html 
1<div class="jumbotron text-white" style="background-image: url('background.jpg'); background-size: cover;">
2  <h1>带背景图片的Jumbotron</h1>
3  <p class="lead">这个Jumbotron有一个自定义的背景图片</p>
4</div>

改变背景颜色

html 
1<div class="jumbotron bg-primary text-white">
2  <h1>蓝色Jumbotron</h1>
3  <p class="lead">使用Bootstrap的背景色类改变Jumbotron的颜色</p>
4</div>

添加阴影效果

html 
1<div class="jumbotron" style="box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
2  <h1>带阴影的Jumbotron</h1>
3  <p class="lead">这个Jumbotron有一个轻微的阴影效果</p>
4</div>

Jumbotron中的内容布局

Jumbotron支持各种内容布局：

居中内容

html 
1<div class="jumbotron text-center">
2  <h1>居中的Jumbotron</h1>
3  <p class="lead">所有内容都居中对齐</p>
4</div>

使用栅格系统

html 
 1<div class="jumbotron">
 2  <div class="row">
 3    <div class="col-md-6">
 4      <h2>左侧内容</h2>
 5      <p>这是左侧列的内容</p>
 6    </div>
 7    <div class="col-md-6">
 8      <h2>右侧内容</h2>
 9      <p>这是右侧列的内容</p>
10    </div>
11  </div>
12</div>

响应式考虑

Jumbotron在所有屏幕尺寸上都能很好地工作，但在小屏幕上可能需要一些调整：

html 
1<div class="jumbotron">
2  <h1 class="display-4 d-none d-sm-block">大屏幕标题</h1>
3  <h1 class="d-block d-sm-none">小屏幕标题</h1>
4  <p class="lead">根据屏幕大小调整内容</p>
5</div>

Jumbotron与其他组件结合

Jumbotron可以与Bootstrap的其他组件结合使用：

与按钮组结合

html 
1<div class="jumbotron">
2  <h1>选择你的计划</h1>
3  <p class="lead">我们提供多种定价方案</p>
4  <div class="btn-group">
5    <button type="button" class="btn btn-primary">基础版</button>
6    <button type="button" class="btn btn-success">专业版</button>
7    <button type="button" class="btn btn-info">企业版</button>
8  </div>
9</div>

与表单结合

html 
1<div class="jumbotron">
2  <h2>订阅我们的通讯</h2>
3  <form>
4    <div class="form-group">
5      <input type="email" class="form-control" placeholder="输入您的邮箱">
6    </div>
7    <button type="submit" class="btn btn-primary">订阅</button>
8  </form>
9</div>

最佳实践

  1. 保持Jumbotron内容简洁明了，专注于最重要的信息
  2. 使用Bootstrap的排版类（如.display-4、.lead）来强调文本
  3. 为移动设备考虑响应式设计，确保在小屏幕上显示合适
  4. 使用Bootstrap的间距工具类（如.mt-4、.mb-2）来调整元素之间的间距
  5. 避免在Jumbotron中放置过多内容，以免分散用户注意力

注意事项

在Bootstrap 5中，Jumbotron组件已被移除。如果你计划将来升级到Bootstrap 5，可以使用cards、utilities和组件的组合来创建类似的效果。

		Bootstrap4 Jumbotron

Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。

我们可以通过在

元素 中添加 .jumbotron 类来创建 jumbotron:

实例

菜鸟教程

学的不仅是技术，更是梦想！！！

尝试一下 »

全屏幕的 Jumbotron

如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现:

实例

菜鸟教程

学的不仅是技术，更是梦想！！！

尝试一下 »