如何在 Bootstrap 5 中创建 jumbotron？

Posted 2023-03-05

【中文标题】如何在 Bootstrap 5 中创建 jumbotron？

【英文标题】：How to create jumbotron in Bootstrap 5?

【发布时间】：2020-11-18 07:53:47

【问题描述】：

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

【参考方案1】：

您可以使用以下代码sn-p：

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

还可以访问此链接并使用“检查元素”功能根据您的需要对上述代码 sn-p 进行修改。 Jumbotron Example

【参考方案2】：

无需创建类，因为它可以使用实用程序进行复制。

以下是 Boostrap v5 的 jumbotron (Bootstrap v4) 示例：

    <div class="p-5 mb-4 bg-light rounded-3">
        <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold">Custom jumbotron</h1>
            <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in
                previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to
                your liking.</p>
            <button class="btn btn-primary btn-lg" type="button">Example button</button>
        </div>
    </div>

来源：https://getbootstrap.com/docs/5.0/examples/jumbotron/

【参考方案3】：

移除了 jumbotron 组件以支持实用程序类，例如用于背景颜色的 .bg-light 和用于控制填充的 .p-* 类。参考： https://getbootstrap.com/docs/5.0/migration/#jumbotron

你可以试试这样的

<div class="container-fluid text-sm-center p-5 bg-light"> <!-- bg-light is background color & p-5 is padding -->
    <h1 class="display-2">Full Stack Conf</h1>
    <p class="lead">A One-day Conference About All Things javascript!</p>
</div>

在此处查找更多示例： https://getbootstrap.com/docs/5.0/examples/jumbotron/

【参考方案4】：

我只是使用了一些基本的容器和填充引导 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>

【讨论】：

我的意思是它看起来像一个大屏幕

【参考方案5】：

由于 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/

【参考方案6】：

迁移文档为您提供了您需要了解的确切信息。在 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 阶段，可能会发生任何数量的变化。

【讨论】：

我得到了一个固定的导航栏，它被排除在流量之外，所以我尝试用 py-5 推动 Bootstrap 5 jumbotron。它可以工作，但 jumbotron 仍然与导航栏有一点重叠。将 Bootstrap 5 jumboron 向下推的最佳方法是什么？

是的 mt-5 效果一样。

您能在 jsfiddle 或 stackblitz 等在线 ide 上重新创建您的问题吗？

啊！现在有道理了。解决您的问题的最佳方法是在主体上添加顶部填充。所以尝试将pt-3 添加到body 并尝试使用该数字以获得您想要的结果。

pt-3是固定导航栏的默认高度吗？