Bootstrap 5 大型展示框

在 Bootstrap 3 中，jumbotron 被引入作为一个大的、带内边距的盒子，用于突出显示特殊内容或信息。现在，jumbotron 在 Bootstrap 5 版本中不再支持。我们可以使用 <div> 元素、特殊的辅助类和一个颜色类来实现相同的结果。

Jumbotron 是网页中的一个基本功能，可以帮助用户理解内容。它有助于概述页面，并在较小的空间内获取主要内容。 Bootstrap 5 使用 margin、padding、上下文和其他设计类来创建一个基本的 jumbotron。

语法

以下语法在网页上创建一个基本的 jumbotron。我们可以使用其他类来创建创造性的 jumbotron。

描述

• "m-3" (margin) 类用于设置 <div> 标签的 margin。我们可以使用元素的顶部、底部、左侧和右侧。
• "p-5" 类用于设置 <div> 标签的 padding。我们可以使用元素的顶部、底部、左侧和右侧。
• 上下文背景类 (bg-secondary) 需要设置 jumbotron 背景。我们可以在 <div> 标签中设置图像作为背景。

基本 jumbotron 示例

以下示例显示了一个具有 margin、padding 和上下文类的基本 jumbotron。

输出

下图显示了一个使用 bootstrap 5 类的自定义 jumbotron。

带有图像的 Jumbotron 示例

Bootstrap 5 jumbotron 包含信息、图像和网页标题。以下示例显示了一个具有 margin、padding 和上下文类的 jumbotron。在这里，我们可以将图像放置在 div 标签中。 jumbotron 在元素中与其他类一起使用 "rounded" 类。

输出

以下输出显示了放置在 jumbotron 上的图像和数据。

Jumbotron 背景图片示例

使用 css 属性在 bootstrap 5 自定义 jumbotron 中设置背景图片。以下示例显示了一个具有 margin、padding 和上下文类的 jumbotron。在这里，我们可以将图像放置在 div 标签中。 jumbotron 在元素中与其他类一起使用 "rounded" 类。

输出

下图显示了 jumbotron 的背景图片。

结论

Bootstrap 5 没有 jumbotron 类，但我们需要自定义它。我们可以为网页制作有吸引力、动画和用户友好的 jumbotron。 bootstrap 5 版本使用多个类来创建一个引人注目且简单的 jumbotron 功能。