如何在 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;
}

除了特定的背景颜色外，您可以在不使用此 class:

的情况下完全模拟它

<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 阶段并且可能会有许多变化。

Answer 2

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

这里是 fiddle：https://jsfiddle.net/fatgamer85/ya37wk4c/2/

Answer 3

我只是使用了一些基本的容器和填充 bootstrap 5 class 下面是一个例子：

<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 4

删除了 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/

Answer 5

不需要创建 class，因为它可以用实用程序复制。

这是 Boostrap v5 的超大屏幕 (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/

Answer 6

您可以使用以下代码片段：

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

另请转至此 link 并使用“检查元素”功能根据需要对上述代码片段进行修改。 Jumbotron Example

Answer 7

A 纯 Bootstrap 5 溶液 不需要 CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>




    <header >
        <div class="container-fluid text-sm-center p-5 bg-light"> <!-- bg-light is background color & p-5 is padding -->
            <h1 class="display-2">Hasan Al-Sayyed</h1>
            <p class="lead">This is my first Github comment!</p>
        </div>
    </header>





<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

注意：Bootstrap 5 不支持“jumboton” 我认为这种方法更好您可以使用 bg-dark 更改颜色 ... etc

Answer 8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>




    <header >
        <div class="container-fluid text-sm-center p-5 bg-light"> <!-- bg-light is background color & p-5 is padding -->
            <h1 class="display-2">Hasan Al-Sayyed</h1>
            <p class="lead">This is my first Github comment!</p>
        </div>
    </header>





<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Answer 9

这与 Bootstrap 4 完全相同只需将其复制并粘贴到代码中即可。

  <div class="container py-5 px-3 my-4 rounded" style="background:#E9ECEF">
        <h1 class="display-4 pb-2">Welcome to Python Forums</h1>
        <p class="lead">Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code</p>
        <hr>
        <p class="py-2">This is peer to peer forum for sharing knowledge with each other</p>
        <div class="btn btn-primary">Learn more</div>
    </div>

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

How to create jumbotron in Bootstrap 5?

twitter-bootstrap

bootstrap-5