如何在 Bootstrap 5 中创建超大屏幕？

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;
}

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

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

话虽如此，如果您是 Bootstrap 新手，我强烈建议您不要尝试掌握 v5.x，该版本目前处于 alpha 阶段并且可能会发生任何数量的变化。

Answer 2

我只使用一些基本容器和 padding bootstrap 5 类，这是一个示例：

<div class="container-fluid bg-dark text-light p-5">
    <div class="container bg-dark p-5">
        <h1 class="display-4">Welcome to my Website</h1>
        <hr>
        <p>Go to My Website</p>
        <a href="#" class="btn btn-primary">link</a>
    </div>
</div>

Answer 3

由于 v5 中没有 Jumbotron，如果您要迁移到 v5，重新实现它的最佳方法是重用 v4 jumbotron 代码。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

<style type="text/css">
    .jumbotron {
      padding: 4rem 2rem;
      margin-bottom: 2rem;
      background-color: var(--bs-light);
      border-radius: .3rem;  
    }
</style>

<div class="jumbotron">
  <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>

这是一个小提琴：https ://jsfiddle.net/fatgamer85/ya37wk4c/2/