Bootstrap 超大屏幕

Bootstrap Jumbotron 组件的作用和使用方法

问题

Bootstrap 中超大屏幕（Jumbotron）的作用是什么？

解答

Jumbotron（超大屏幕）是 Bootstrap 提供的一个轻量级组件，用于展示网站的核心信息或重要内容。它通常出现在页面顶部，以大字体和充足的内边距吸引用户注意。

基本用法（Bootstrap 4）

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 基础超大屏幕 -->
<div class="jumbotron">
  <h1 class="display-4">欢迎来到我的网站</h1>
  <p class="lead">这是一段简短的介绍文字，用于描述网站的主要功能。</p>
  <hr class="z5ux1">
  <p>更多详细信息请点击下方按钮。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

<!-- 全宽超大屏幕 -->
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">全宽超大屏幕</h1>
    <p class="lead">使用 jumbotron-fluid 类可以让组件占满整个视口宽度。</p>
  </div>
</div>

</body>
</html>

Bootstrap 5 的变化

Bootstrap 5 移除了 Jumbotron 组件，改用工具类实现相同效果：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 使用工具类模拟 Jumbotron -->
<div class="ae2aq fa5xx bg-light rounded-3">
  <div class="container-fluid t9slk">
    <h1 class="display-5 fw-bold">自定义超大屏幕</h1>
    <p class="col-md-8 fs-4">Bootstrap 5 中使用 padding 和背景色工具类实现。</p>
    <button class="btn btn-primary btn-lg" type="button">开始使用</button>
  </div>
</div>

</body>
</html>

自定义样式

<style>
  .custom-jumbotron {
    /* 背景图片 */
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
    /* 文字颜色 */
    color: white;
    /* 内边距 */
    padding: 100px 25px;
  }
</style>

<div class="jumbotron custom-jumbotron">
  <h1>带背景图的超大屏幕</h1>
  <p>可以添加背景图片增强视觉效果。</p>
</div>

关键点

Jumbotron 用于突出展示网站的重要信息，常见于首页头部
默认带有灰色背景、圆角和较大的内边距
jumbotron-fluid 配合 container 可实现全宽效果
Bootstrap 5 已移除该组件，需用 p-5 bg-light rounded-3 等工具类替代
可通过自定义 CSS 添加背景图片、调整颜色等