开发者学堂课程【前端开发框架Bootstrap使用教程：30_Bootstrap组件_巨幕，页头，缩略图】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4249
30_Bootstrap组件_巨幕，页头，缩略图
目录
一、巨幕
二、页头
三、缩略图
一、巨幕
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。
<div class="jumbotron">
<div class="container">
...
</div>
</div>
范例1：
< !DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title>巨幕</title>
<link href="bootstrap.min.css"rel="stylesheet"/>
< /head>
<body>
<div class="jumbotron">
<h1>Hello World!</h1>
<p>This is a simple hero unit, a simple jumbotron- style component for calling extra attention to featured content or information.
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>
< /body>
< /html>
二、页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
范例2：
< !DOCTYPE html>
<html lang-"en">
<head>
<meta charset="UTF-8">
<title>页头</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="page- header">
<h1> Bootstrap学习<small>页头的学习</small></h1>
<h3>Bootstrap学习<small>页头的学习</small>< /h3>
</div>
< /body>
< /html>
三、缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地以网格的方式展示图像、视频、文本等内容。
如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。
1.默认样式的实例
Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
范例3：
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
< /head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12 col-sm-6">
<a class="thumbnail" href="#">
<img src="repeat.jpg" alt=".. .">
</a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="repeat.jpg" alt=".. ."></a>
</div>
<div class="col-md-3">
<a class= "thumbnail" href="#">
<img src="repeat.jpg" alt="..."></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="repeat.jpg" alt="..."></a>
</div>
</div>
</body>
</html>
2.自定义内容
添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>