案例 Jumbotron

Bootstrap 案例：创建英雄区域（Jumbotron 的替代方案）

英雄区域（前身为 Jumbotron）

Jumbotron 组件已在 Bootstrap 5 中移除。但是，您可以使用 Bootstrap 的实用类（Utility classes）来实现类似的突出“英雄”区域效果，这些实用类用于控制内边距、外边距、背景颜色和排版等。

英雄区域通常是一个大型、引人注目的区块，用于突出关键内容或行动号召。

要创建一个类似英雄区域的区块，您可以使用一个 <div> 元素，并使用实用类为其添加样式。例如，使用 .p-5 设置大内边距，.mb-4 设置底部外边距，.bg-light 设置浅色背景，以及 .rounded-3 设置圆角。

以下示例演示了如何创建英雄区域：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Hero Section Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <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">My First Bootstrap 5 Website!</h1>
        <p class="col-md-8 fs-4">This page will grow as we add more components and features using Bootstrap...</p>
        <button class="btn btn-primary btn-lg" type="button">Example button</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 Content Block</h2>
          <p>Some interesting information here.</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-light border rounded-3">
          <h2>Yet Another Section</h2>
          <p>More details or calls to action.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
    </div>

    <footer class="pt-3 mt-4 text-muted border-top">
      &copy; 2023
    </footer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

自定义

是否可以自定义英雄区域？如果我想用不同的颜色或样式怎么办？

当然可以！您可以自定义 Bootstrap 中的所有元素和组件。对于使用实用类创建的英雄区域，您可以：

**背景：**使用 .bg-* 实用类（例如，.bg-primary, .bg-dark）或自定义 CSS 设置背景颜色或图片。
**文本颜色：**使用 .text-* 实用类（例如，.text-white, .text-muted）。
**内边距和外边距：**使用 .p-, .m-, .py-, .px- 等调整间距。
**边框和圆角：**使用 .border, .rounded-* 实用类。
**排版：**使用 display 标题类（.display-），字体粗细实用类（.fw-），以及文本对齐实用类（.text-center 等）。

要进行更广泛的自定义，您可以覆盖 Bootstrap 的 Sass 变量或编写自己的自定义 CSS。我们将在后面的章节中探讨自定义技术。