Bootstrap jumbotron指定一个大盒子，以引起对某些特殊内容或信息的额外关注。它显示为带有圆角的灰色框。它还可以放大其中文本的字体大小。
你可以将任何有效的HTML或其他Bootstrap元素/类放入巨型机中。
<
div>
元素中的类.jumbotron用于创建巨型。
超大屏幕以内的容器
如果你不希望超大屏幕延伸到屏幕的边缘，则在超大屏幕中使用“内部”容器。
将巨无霸放入<
div class =“ container”>
中。
例：
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<
/head>
<
body><
div class="container">
<
div class="jumbotron">
<
h1>This is Jumbotron inside container!<
/h1>
<
p>Jumbotron specifies a big box for getting extra attention to some special content or information.<
/p>
<
/div>
<
p>This is some text.<
/p>
<
p>This is another text.<
/p>
<
/div><
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150KUT6-1.jpg"><
/script>
<
/body>
<
/html>超大屏幕以外的容器
当你希望超大屏幕扩展到屏幕边缘时使用。
将巨无霸放到< div class =“ container”> 之外。
例：
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<
/head>
<
body><
div class="jumbotron">
<
h1>This is Jumbotron outside container!<
/h1>
<
p>Jumbotron specifies a big box for getting extra attention to some special content or information.<
/p>
<
/div><
div class="container">
<
p>This is some text.<
/p>
<
p>This is another text.<
/p>
<
/div><
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150KUT6-1.jpg"><
/script>
<
/body>
<
/html>全宽超大加速器
要获得没有圆角边界的巨型机，你必须在其中添加.jumbotron-fluid类和.container或.container-fluid。
例：
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150KR4T-5.jpg"><
/script>
<
script src="http://img.readke.com/220416/150KUK9-6.jpg"><
/script>
<
/head>
<
body><
div class="jumbotron jumbotron-fluid">
<
div class="container">
<
h1>Full-width Jumbotron<
/h1>
<
p>Jumbotron specifies a big box for getting extra attention to some special content or information.<
/p>
<
/div><
div class="container">
<
p>This is some text.<
/p>
<
p>This is another text.<
/p>
<
/div><
/body>
<
/html>引导页面页眉
页面标题就像节分隔符。它在标题下添加了一条水平线。
.page-header类用于创建页面标题。
【bootstrap的超大屏幕】例：
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<
/head>
<
body><
div class="container">
<
div class="page-header">
<
h1>Example Page Header<
/h1>
<
/div>
<
p>This is some text.<
/p>
<
p>This is another text.<
/p>
<
/div><
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150KUT6-1.jpg"><
/script>
<
/body>
<
/html>
