srcminiBootstrap 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></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类用于创建页面标题。
例：
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
评论前必须登录！
注册