3.7Bootstrap学习组件篇之大屏幕介绍、页面标题、缩略图、警示框、Well

1、大屏幕介绍

轻量，灵活的可选组件，扩展整个视角，展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度，请别把它包括在.container。

<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>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

如果需要让大屏幕介绍（jumbotron）占据全部宽度并且去掉圆角，只需将其放到所有.container外面，并在其内部添加一个.container。

<div class="jumbotron">
    <div class="container">
      <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>
      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>
</div>

2、页面标题

简单的h1样式，可以适当地分出空间且分开页面中的章节。像其它组件一样，它可以使用h1的默认small元素（添加了一些额外的样式）。

<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1></d

3、缩略图

用缩略图组件扩展Bootstrap的栅格系统，可以简单地显示栅格样式的图像，视频，文本，等等。

默认案例

Boostrap的缩略图的默认设计仅需最小的标记，就能展示带链接的图片。

代码：

<div class="row">
			<div class="col-md-3 col-xs-6">
				<a href="#" class="thumbnail"><img src="http:placehold.it/300/f00/fff&text=hello+world" alt="" /></a>
			</div>
			<div class="col-md-3 col-xs-6">
				<a href="#" class="thumbnail"><img src="http:placehold.it/300/f00/fff&text=hello+world" alt="" /></a>
			</div>
			<div class="col-md-3 col-xs-6">
				<a href="#" class="thumbnail"><img src="http:placehold.it/300/f00/fff&text=hello+world" alt="" /></a>
			</div>
			<div class="col-md-3 col-xs-6">
				<a href="#" class="thumbnail"><img src="http:placehold.it/300/f00/fff&text=hello+world" alt="" /></a>
			</div>
		</div>

预览：

页面缩放，会2x2排列

定制内容

用一点点额外的标记，可以把任何种类的HTML内容像标题，段落或按钮加入缩略图。

代码：

<div class="row">
			<div class="col-md-4 col-sm-6">
				<div class="thumbnail">
					<img src="http://placehold.it/300/f00/fff" alt="" />
					<div class="caption">
						<h3>标题</h3>
						<p>这里可以放置描述信息或者替他的东西</p>
						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
							<a href="#" class="btn btn-default" role="button">按钮</a>
						</p>
					</div>
				</div>
			</div>
			
			<div class="col-md-4 col-sm-6">
				<div class="thumbnail">
					<img src="http://placehold.it/300/f00/fff" alt="" />
					<div class="caption">
						<h3>标题</h3>
						<p>这里可以放置描述信息或者替他的东西</p>
						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
							<a href="#" class="btn btn-default" role="button">按钮</a>
						</p>
					</div>
				</div>
			</div>
			
			<div class="col-md-4 col-sm-6">
				<div class="thumbnail">
					<img src="http://placehold.it/300/f00/fff" alt="" />
					<div class="caption">
						<h3>标题</h3>
						<p>这里可以放置描述信息或者替他的东西</p>
						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
							<a href="#" class="btn btn-default" role="button">按钮</a>
						</p>
					</div>
				</div>
			</div>
			
			<div class="col-md-4 col-sm-6">
				<div class="thumbnail">
					<img src="http://placehold.it/300/f00/fff" alt="" />
					<div class="caption">
						<h3>标题</h3>
						<p>这里可以放置描述信息或者替他的东西</p>
						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
							<a href="#" class="btn btn-default" role="button">按钮</a>
						</p>
					</div>
				</div>
			</div>
		</div>

预览：

4、警示框

为典型的用户动作提供少数可用且灵活的反馈消息。要用关闭功能，请使用jQuery警告框插件.

案例

为了得到基本的警告信息，把任何文本和可选的关闭按钮放入.alert和四种有意义的类中（例如，.alert-success）。

没有默认类

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功，消息，警告或危险中任选其一。

代码：

<h1 class="page-header">警示框</h1>
		<div class="alert alert-success">
		做得好！你成功阅读了这个重要的弹出信息！
		</div>
		<div class="alert alert-info">
		小心！这个弹出框需要你的注意！但是不是非常重要。
		</div>
		<div class="alert alert-warning">
		警告！你最好检查一下。你看起来不怎么好。
		</div>
		<div class="alert alert-danger">
		危险！
		</div>

预览：

可关闭的警告框

可以用一个可选的.alert-dismissable和关闭按钮。

× Warning! Best check yo self, you're not looking too good.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  带关闭按钮的警示框
</div>预览：

确定在所有设备上的正确行为

一定要给data-dismiss="alert"属性用上<button>。

用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。

    <div class="alert alert-success">Well done! 
        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
    <div class="alert alert-info">Well done! 
        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
    <div class="alert alert-warning">Well done! 
        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
    <div class="alert alert-danger">Well done!
        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>

5、Well

默认效果

把Well用在元素上，能有嵌入(inset)的的简单效果。

<div class="well"> ... </div>

可选类

用这两种可选修饰类，可以控制内补（padding）和圆角。

<div class="well well-lg">...</div>

<div class="well well-sm">...</div>