在 Bootstrap 5 中，移除了 jumbotron 组件，取而代之的是实用程序类，例如用于背景颜色的 .bg-light 和用于控制填充的 .p-* 类。我是新手，有人可以举例说明如何做到这一点吗？
问问题
40900 次
8 回答
37
迁移文件准确地为您提供了您需要知道的内容。在 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 阶段，并且可以进行任意数量的更改。
于 2020-07-28T20:13:58.780 回答
5
我只是使用了一些基本的容器和填充引导 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>
于 2021-05-04T07:49:05.730 回答
4
由于 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>于 2020-07-28T20:24:06.863 回答
1
删除了 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/
于 2021-06-21T06:41:15.923 回答
1
无需创建类，因为它可以使用实用程序进行复制。
以下是 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>
于 2021-08-11T10:46:46.070 回答
0
您可以使用以下代码片段：
<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>
还可以转到此链接并使用“检查元素”功能根据您的需要对上述代码片段进行修改。Jumbotron 示例
于 2022-01-02T12:45:22.110 回答
0
纯 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>于 2022-02-20T21:25:33.423 回答
0
<!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>于 2022-02-22T10:51:51.923 回答