超大屏幕（Jumbotron） 步骤如下：
1. 创建一个带有 class .jumbotron. 的容器 <div>。
2. 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
页面标题（page-header）
页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如 需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div>
代码实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>超大屏幕页面标题</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
<!--
Jumbotron样式：超大屏幕，该组件可以增 加标题的大小，并为登陆页面内容添加更多的外边距（margin）
page-header样式：页面标题,每个标题之间添加一定的间距
small样式：副标题
-->
<div class="container">
<div class="jumbotron">
<h1>超大屏幕</h1>
<h2>Hello Worid！</h1>
<p>你好，世界！</p>
<p><a href="https://v3.bootcss.com/" class="btn btn-primary btn-lg">因为穷，才会热爱学习</a></p>
</div>
<div class="page-header">
<h1>页面标题</h1>
<h2>Hello Worid！<small>你好，世界！</small></h1>
</div>
<p>
都说女儿找了男朋友，父母会有自己辛辛苦苦种的白菜被猪拱了的伤感。
可我弟弟自从找了女朋友，连家里都不回来住了，天天岳母娘给做好吃的，各种的乐不思蜀啊。
老妈45°角仰望天空说：“白菜有没有拱着不知道，反正养了20多年的猪肯定是丢了。。。 ”
</p>
</div>
<!-- <div class="jumbotron">
<div class="container">
<h1>欢迎登录页面！</h1>
<p>这是一个超大屏幕的示例</p>
<p><a href="#" class="btn btn-primary btn-lg">学习更多</a></p>
</div>
</div> -->
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>显示效果：
