如何在 Bootstrap 5 中创建超大屏幕? [英] How to create jumbotron in Bootstrap 5?

问题描述

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

解决方案

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

.jumbotron {填充:2rem 1rem；底边距:2rem；背景颜色:#e9ecef；边界半径:.3rem；}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><h5>在 Bootstrap v4.x</h5><div class="jumbotron m-3"><h1 class="display-4">你好，世界！</h1><p class="lead">这是一个简单的英雄单元，一个简单的超大屏幕风格的组件，用于引起对特色内容或信息的额外关注.</p><hr class="my-4"><p>它使用实用程序类进行排版和间距，以在较大的容器内分隔内容.</p><a class="btn btn-primary btn-lg" href="#" role="button">了解详情</a>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOHKG8WgZl5MYYcgind>;<h5>在 Bootstrap v5.x</h5><div class="bg-light p-5 rounded-lg m-3"><h1 class="display-4">你好，世界！</h1><p class="lead">这是一个简单的英雄单元，一个简单的超大屏幕风格的组件，用于引起对特色内容或信息的额外关注.</p><hr class="my-4"><p>它使用实用程序类进行排版和间距，以在较大的容器内分隔内容.</p><a class="btn btn-primary btn-lg" href="#" role="button">了解详情</a>

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

In Bootstrap 5 the jumbotron component is removed in favor of utility classes like .bg-light for the background color and .p-* classes to control padding. I'm a newbie, can somebody give example of how to do that?

解决方案

The migration documents give you exactly what you need to know. In v4.x Bootstrap's .jumbotron component is literally just this:

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

You can, with the exception of the specific background color, emulate this entirely without the use of this 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>

That being said, if you are a novice Bootstrap I would strongly recommend holding off trying to master v5.x which is currently in alpha and subject to any number of changes.

这篇关于如何在 Bootstrap 5 中创建超大屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！