本章将讲解Bootstrap的一个特性:超大屏幕(Jumbonron),顾名思义该组件可以增加标题的大小,并为登录页面的内容添加更多的外边矩。
使用超大屏幕的步骤如下:
1、创建一个还有class.jumbonron类的div
2、除了更大的 <h1>,字体粗细 font-weight 被减为 200px。
实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>bootstrap欢迎登录页面</h1>
<p>这是一个超大屏幕(Jumbonron)的实例</p>
<p><a href="#" class="btn btn-default btn-primary" role="button">bootstrap是目前最流行的前端框架,好好学习。</a></p>
</div>
</div>
<div class="jumbotron">
<h1>bootstrap欢迎登录页面</h1>
<p>这是一个超大屏幕(Jumbonron)的实例</p>
<p><a href="#" class="btn btn-default btn-primary" role="button">bootstrap是目前最流行的前端框架,好好学习。</a></p>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>