Bootstrap Jumbotron
在本教程中，您将学习如何使用 Bootstrap jumbotron 组件。
使用 Jumbotron 展示内容
Bootstrap jumbotron 组件提供了一种在网页上展示关键内容或信息的绝佳方式。 只需将标题、描述等特色内容包装在 <div> 元素中，然后在其上应用类 .jumbotron。
<div class="jumbotron">
<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>— 上面示例的输出将如下所示：
创建整页宽度的 Jumbotron
要创建一个没有圆角并覆盖整个视口宽度的巨型显示器，请将其放在所有容器之外，在其上添加 .jumbotron-fluid 修饰符类，然后添加 .container 或 .container -fluid ，如下例所示：
<div class="jumbotron jumbotron-fluid">
<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...</p>
<p><a href="#" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>
</div>Advertisements