Bootstrap Jumbotron
在本教程中，您将学习如何在 Bootstrap 中创建 jumbotron。
使用 Jumbotron 展示内容
Bootstrap jumbotron 提供了一种在网页上展示关键内容或信息的绝佳方式。 但是，Bootstrap 的默认 jumbotron 组件已从版本 5 中删除。但是，您仍然可以使用 Bootstrap 内置实用程序类创建自定义 jumbotron。
让我们看一个示例来了解如何创建自定义 jumbotron：
<div class="p-5 mb-4 bg-light border rounded-3">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="http://www.qyoo.cn" target="_blank">qyoo.cn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
<p><a href="http://www.qyoo.cn" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>— 上面示例的输出将如下所示：
提示： 类 .p-5 在所有四个边上应用 3rem 的填充，而类 .mb-4 将 1.5rem 的底部边距应用到 jumbotron。 同样，类 .border 和 .rounded-3 分别在所有四个边上应用边界和边界半径 .3rem。 请参阅 Bootstrap 助手类 章节以了解有关各种实用程序类的更多信息。
您还可以通过简单地将其内部内容包装在 .container 元素中并从包装元素中删除 .border 和 .rounded-* 类来创建具有居中内容的全宽 jumbotron，如以下示例所示：
<div class="py-5 mb-4 bg-light">
<div class="container">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="http://www.qyoo.cn" target="_blank">qyoo.cn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
<p><a href="http://www.qyoo.cn" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>
</div>更改 Jumbotron 的配色方案
同样，您可以使用 Bootstrap 的 color 和 background 实用程序类创建 jumbotron 的其他变体。 以下示例将创建一个深色变体 jumbotron。
<div class="p-5 mb-4 bg-dark text-white rounded-3">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="http://www.qyoo.cn" target="_blank" class="text-white">qyoo.cn</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
<p><a href="http://www.qyoo.cn" target="_blank" class="btn btn-light btn-lg">Start learning today</a></p>
</div>Advertisements