Bootstrap/docs/4.5/components/jumbotron

在GitHub上查看

巨无霸

轻巧灵活的组件,用于展示英雄单位风格的内容。

一个轻巧,灵活的组件,可以选择扩展整个视口,以在您的站点上展示关键的营销信息。

你好,世界！

这是一个简单的英雄单元,是一个简单的巨型广告风格的组件,可以引起人们对特色内容或信息的更多关注。

---

它使用实用程序类来进行排版和间距,以在较大的容器内分隔内容。

学到更多

<div class="jumbotron">
<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>
</div>

要使超长距伞全宽且没有圆角,请添加 .jumbotron-fluid 修饰符类并添加一个 .container or .container-fluid 内。

流体大剂量

这是一个改良的巨型飞鸟,占据了其父代的整个水平空间。

<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"> 流体大剂量 </h1>
<p class="lead"> 这是一个改良的巨型飞鸟,占据了其父代的整个水平空间。 </p>
</div>
</div>