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>

效果：