twitter-bootstrap - 如何在 Bootstrap 5 中创建 jumbotron？

Question

在 Bootstrap 5 中，移除了 jumbotron 组件，取而代之的是实用程序类，例如用于背景颜色的 .bg-light 和用于控制填充的 .p-* 类。我是新手，有人可以举例说明如何做到这一点吗？

Answer 1

迁移文件准确地为您提供了您需要知道的内容。在 v4.x Bootstrap 的 .jumbotron组件实际上就是这样:

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

除了特定的背景颜色之外，您可以在不使用此类的情况下完全模拟它:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v4.x</h5>

<div class="jumbotron m-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v5.x</h5>

<div class="bg-light p-5 rounded-lg m-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

话虽这么说，如果您是 Bootstrap 新手，我强烈建议您不要尝试掌握 v5.x，它目前处于 alpha 阶段，并且可以进行任意数量的更改。