Bootstrap Jumbotron

Bootstrap 5：英雄区与页面头部

在 Bootstrap 5 中，.jumbotron 和 .page-header 组件已被移除。本节将演示如何使用 Bootstrap 的[工具类](utility classes)和标准 HTML 元素来创建类似外观的、醒目的内容区域（通常称为“英雄区”）和页面头部。

创建英雄区 (Jumbotron 替代方案)

英雄区是一个大型、醒目的区域，通常位于网页顶部，用于展示关键内容或行动号召。虽然 .jumbotron 已不复存在，但你可以轻松地通过使用用于内边距、[背景色](background color)和[圆角](rounded corners)的工具类来复制其效果。

内边距：p-5（大内边距），py-5（大垂直内边距）等。
[背景色](Background color)：bg-light，bg-dark，bg-primary，或自定义背景类。
[圆角](Rounded corners)：rounded-3（大圆角）等。
文本工具类：text-center（文本居中），display-* 用于大标题，fs-* 用于字体大小。

Bootstrap 教程 Bootstrap 是最受欢迎的 HTML, CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目。

容器内的英雄区

要创建一个符合标准 Bootstrap 容器边界（非全宽）的英雄区：

<div class="container py-4">
  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Bootstrap 5 Tutorial</h1>
      <p class="col-md-8 fs-4">Using a series of utility classes, you can create this hero section, just like the old Bootstrap jumbotron component. It's highly customizable!</p>
      <button class="btn btn-primary btn-lg" type="button">Learn more</button>
    </div>
  </div>

  <div class="row align-items-md-stretch">
    <div class="col-md-6">
      <div class="h-100 p-5 text-bg-dark rounded-3">
        <h2>Another Section</h2>
        <p>Or, keep it light and add a border for some added definition.</p>
        <button class="btn btn-outline-light" type="button">Example button</button>
      </div>
    </div>
    <div class="col-md-6">
      <div class="h-100 p-5 bg-body-tertiary border rounded-3">
        <h2>And Another</h2>
        <p>Swap the background-color utility and add a `.border` utility.</p>
        <button class="btn btn-outline-secondary" type="button">Example button</button>
      </div>
    </div>
  </div>

  <footer class="pt-3 mt-4 text-body-secondary border-top">
    &copy; 2023
  </footer>
</div>

<!--
  Explanation:
  - `div.container.py-4`: 主容器，带有垂直内边距。
  - `div.p-5.mb-4.bg-light.rounded-3`: 英雄区本身。`p-5` 用于内边距，`mb-4` 用于下外边距，`bg-light` 用于背景，`rounded-3` 用于圆角。
  - `div.container-fluid.py-5`: 内容的内部容器，`py-5` 用于英雄区内部的更多垂直内边距。
  - `h1.display-5.fw-bold`: 大而粗的标题。
  - `p.col-md-8.fs-4`: 在中等及以上屏幕上宽度受限的段落，字体大小更大。
  - 此示例改编自 Bootstrap 5 官方 Jumbotron 示例：https://getbootstrap.com/docs/5.3/examples/jumbotron/
-->

应用场景：英雄区非常适合首页，用于介绍产品、服务或关键信息，通常伴随一个强烈的行动号召按钮。

全宽英雄区

要创建跨越整个视口宽度的英雄区，请将应用了样式的 <div> 放在任何会限制其宽度的 .container 外部。内部内容仍然可以使用 .container 来保持标准的文本宽度。

<div class="bg-dark text-secondary px-4 py-5 text-center">
  <div class="py-5">
    <h1 class="display-5 fw-bold text-white">Full-Width Hero</h1>
    <div class="col-lg-6 mx-auto">
      <p class="fs-5 mb-4">This hero section extends to the screen edges. The content within can be centered and constrained using grid columns and auto margins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
        <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
      </div>
    </div>
  </div>
</div>

<div class="container mt-4">
  <p>This is some regular content below the full-width hero section, within a standard container.</p>
</div>

<!--
  Explanation:
  - `div.bg-dark.text-secondary.px-4.py-5.text-center`: 全宽英雄区。`px-4` 和 `py-5` 提供内边距。
  - `div.py-5`: 内部内容的额外垂直内边距。
  - `h1.display-5.fw-bold.text-white`: 为深色背景设计的标题样式。
  - `div.col-lg-6.mx-auto`: 在大屏幕上居中段落和按钮。
  - 此示例启发自 Bootstrap 5 官方 Heroes 示例：https://getbootstrap.com/docs/5.3/examples/heroes/
-->

创建页面头部 (区域分隔符)

Bootstrap 5 也移除了 .page-header 类。你可以使用标准标题 (<h1>-<h6>)、水平分隔线 (<hr>) 以及外边距/内边距工具类来创建视觉上相似的区域分隔符。

示例页面头部

结合使用标题和可选的 <hr> 元素以及外边距工具类：

<div class="container mt-5">
  <div class="pb-2 mb-4 border-bottom">
    <h1>Example Page Header <small class="text-muted fs-5">with a subtext</small></h1>
  </div>
  <p>This is content following the page header. The `border-bottom` utility on a wrapper div or an `<hr>` element can create the dividing line.</p>

  <h2 class="mt-5">Another Section Title</h2>
  <hr class="my-4">
  <p>Content for another section. Here, an `<hr>` with vertical margin (`my-4`) is used.</p>
</div>

<!--
  Explanation:
  - 第一个示例：`div.pb-2.mb-4.border-bottom` 包裹了一个 `<h1>`。`pb-2`（底部内边距）和 `mb-4`（底部外边距）提供间距，`border-bottom` 添加了分隔线。
  - 第二个示例：一个简单的 `<h2>` 后跟 `<hr class="my-4">`（顶部和底部外边距）。
  - 可以根据需要使用 Bootstrap 工具类或自定义 CSS 来自定义间距和线条样式。
-->

应用场景：页面头部有助于清晰地划分页面主要区域，改善结构和可读性。