Bootstrap 徽章、大屏幕展播、页面标题、缩略图

一、Bootstrap徽章

用于显示一些最新收到的消息、需要多少审批的消息等，给span样式应用.badge样式即可，示例代码：

<h1>JavaScript权威指南<span class="badge">58</span></h1>

效果：

给它加一个pull-left样式：

<h1>JavaScript权威指南<span class="badge pull-left">58</span></h1>

效果：

注意：用户可以自己定义它的大小，背景色等。。。。

二、大屏幕展播

	在设计网页布局的时候，经常会有一些大屏（或大块头）内容的显示，.jumbotron样式提供了这个效果，示例代码：

<div class="jumbotron">
		<h1>Hello world!</h1>
		<p>这个可以是一个很大的内容段落</p>
	</div>
效果：

另外，将其放在<div class="container"></div>可以显示圆角效果：

<div class="container">
   <div class="jumbotron">
      <h1>Hello world!</h1>
      <p>这个可以是一个很大的内容段落</p>
   </div>
</div>
效果：

三、页面标题

	Bootstrap中的.page-header样式提供了类似h1元素的显示效果，只不过margin和底部padding距离稍大一些，底部有1像素的边框稍大一些。使用方式如下：

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

效果：

css源码：

.page-header {
padding-bottom: 9px; /* 设置底部内边距*/
margin: 40px 0 20px; /* 设置上下外边距*/
border-bottom: 1px solid #eee; /* 设置底部边框为1像素,并设置颜色*/
}

四、缩略图

所谓缩略图，就是在一个图片四周还有一内的内边距，使用 .thumbnail样式，示例代码：

<div class="row">
 <div class="col-md-2">
    <a href="#" class="thumbnail">
       <img data-src="img src" src="s.jpg">
    </a>
 </div>
</div>

效果：