组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。
- 巨幕组件
巨幕组件主要是展示网站的关键性区域
//在固定的范围内，有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
//100%全屏，没有圆角
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
- 页头组件
//增加一些空间
<div class="page-header">
<h1>大标题<small>小标题</small></h1>
</div> - 缩略图组件
//缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6"><div class="thumbnail"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/></div></div>
<div class="col-md-3 col-sm-4 col-xs-6"><div class="thumbnail"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/></div></div>
<div class="col-md-3 col-sm-4 col-xs-6"><div class="thumbnail"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/></div></div>
<div class="col-md-3 col-sm-4 col-xs-6"><div class="thumbnail"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/></div></div>
</div>
</div>
//自定义内容
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
</div>
</div> - 警告框组件
警告框组件是一组预定义消息。
//基本警告框
<div class="alert alert-success">Bootsrap</div>
<div class="alert alert-info">Bootsrap</div>
<div class="alert alert-warning">Bootsrap</div>
<div class="alert alert-danger">Bootsrap</div>
//带关闭的警告框
<button type="button" class="close" data-dismiss="alert"
<span>×</span>
</button>
</div>
//自动适配的超链接
<div class="alert alert-success">Bootstrap，请到官网<a href="#" class="alert-linkl">下载</a></div>
- 练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no" >
<!-- 视图窗口 宽度=设备的宽度 初始化大小为1 100% 最大为1 禁止用户缩放 -->
<title>巨幕页头缩略图和警告框组件</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.a {
height: 50px;
border: 1px solid #ccc;
background-color: #eee;
}
</style>
</head>
<body style="margin: 50px;">
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
<br>
<br>
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
<br>
<br>
<div class="page-header">
<h1>大标题<small>小标题</small></h1>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529420240614&di=208c093c9f1bab567f2c17e30176eacc&imgtype=0&src=http%3A%2F%2Fpic14.photophoto.cn%2F20100127%2F0036036848818577_b.jpg"/>
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情！</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="alert alert-success">Bootsrap</div>
<div class="alert alert-info">Bootsrap</div>
<div class="alert alert-warning">Bootsrap</div>
<div class="alert alert-danger">Bootsrap</div>
<br>
<br>
<div class="alert alert-success">Bootstrap
<button type="button" class="close" data-dismiss="alert"
<span>×</span>
</button>
</div>
<br>
<br>
<div class="alert alert-success">Bootstrap，请到官网<a href="#" class="alert-linkl">下载</a></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>