Bootstrap 中 各种组件----巨幕页头缩略图和警告框组件，进度条媒体对象和Well组件（八）

一、巨幕组件(展示网站关键性区域)

<div class="jumbotron">
    <div class="container">
      <h3>网站标题</h3>
      <p>网站详细简介</p>
      <p><a href="#" class="btn btn-default">快速进入</a></p>
    </div>
</div>

1、100%全屏，没有圆角 jumbotron > container

2、在固定的范围内，有圆角 container > jumbotron

二、页头组件（增加了上下距离，底部有灰色的条线）

<div class="page-header">
    <h1>大标题 <small>小标题</small></h1>
</div>

三、缩略图组件（配合响应式）

<div class="col-md-3 col-sm-4 col-xs-6">
      <div class="thumbnail">
        <img src="images/01.jpg" alt="">
        <div class="caption">
          <h3>图文标题</h3>
          <p>文字叙述的图文缩略</p>
          <p><a href="#" class="btn btn-default">点击进入</a></p>
        </div>
      </div>
</div>

.thumbnail   //   缩略图的class

.caption   //   自定义的缩略图下的内容详情（定义了边距和文字颜色）

四、警告框组件

<div class="alert alert-success">
    警告框警告 请下载<a href="#" class="alert-link">最新版本</a>
    <button class="close" data-dismiss="alert" ><span>&times;</span></button>
</div>

.alert   //   基本的警告框

.alert-success   //   成功提示

.alert-info   //   信息提示

.alert-warning   //   警告注意提示

.alert-danger   //   错误提示

.alert-link   //   警告中的超链接，匹配警告框的样式 

.close   //   关闭提示, 后缀 data-dismiss="alert" 配合使用， button><span>&times;</span>

五、well组件（时间简单的嵌入效果，内影响，带 padding 的 border框 ）

<div class="well well-lg">
        Bootstrap
</div>
<div class="well well-sm">
        Bootstrap
</div>

.well   //   嵌入效果

.well-lg   //   变大

.well-sm   //   变小

六、进度条组件（多用于上传）

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-20px;  50%">50%</div>
</div>

  // 堆叠效果
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-danger" style="min-20px;  30%">30%</div>
    <div class="progress-bar progress-bar-striped progress-bar-warning" style="min-20px;  30% ">30%</div>
    <div class="progress-bar progress-bar-striped progress-bar-success" style="min- 20px;  40%">40%</div>
</div> 

.progress   //   定义基本进度条外框

.progress-bar   //   定义基本进度条

min-width   //   最低进度条

.progress-bar-success   //   绿色进度条

.progress-bar-info   //   蓝色进度条

.progress-bar-warning   //   黄色进度条

.progress-bar-danger   //   红色进度条

.progress-bar-striped   //   条纹/斑马线进度条，IE10+支持

.active   //   动画效果，必须是斑马线的才有动画效果

七、媒体对象组件（包含图片、视频、音频等媒体，达到对象和文本组合显示的样式效果，多用于论坛、回帖、楼层和评论）

<div class="media">
      <div class="media-left">
       <img src="images/01.jpg" alt="" class="media-object" width="100">
     </div>
     <div class="media-body">
        <h4 class="media-heading">内容标题</h4>
        <p>
          Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
        </p>
     </div>
      <div class="media-right">
       <img src="images/01.jpg" alt="" class="media-object" width="100">
     </div>
</div>  

.media   //   媒体

.media-left   //   左侧，默认top对齐，非环绕

.media-body   //   右侧主要内容

.media-heading   //   内容标题

.media-right   //   右侧的时候，连带着整个 div 一起放于右侧位置

.media-middle   //   居中对齐

.media-bottom   //   居底对齐

.media-list   //   媒体对象列表

<ul class="media-list">
     <li class="media">
       //每个media 存放在 media-body 内
       <div class="media-left">
         <img src="images/01.jpg" alt="" class="media-object" width="100">
       </div>
       <div class="media-body">
          <h4 class="media-heading">内容标题</h4>
          <p>
            Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
          </p>          
         // 开始复制黏贴
          <div class="media">
            <div class="media-left">
             <img src="images/01.jpg" alt="" class="media-object" width="100">
           </div>
           <div class="media-body">
              <h4 class="media-heading">内容标题</h4>
              <p>
                Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
              </p>
           </div>
          </div>
        // 复制黏贴结束
       </div>
     </li>
</ul>