Bootstrap 进度条媒体对象和 Well 组件

一．Well 组件
这个组件可以实现简单的嵌入效果。
//嵌入效果
<div class="well"> Bootstrap
</div>

//有 lg 和 sm 两种可选值
<div class="well well-lg"> Bootstrap
</div>

二．进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
//基本进度条
<div class="progress">
<div class="progress-bar" >60%</div>
</div>

//最低值进度条
<div class="progress">
<div class="progress-bar" >0%</div>
</div>

//结合情景的进度条
<div class="progress">
<div class="progress-bar progress-bar-success"
>60%</div>
</div>

//条纹状，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" >60%</div>
</div>

//动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" >60%</div>
</div>

//堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success" >35%</div>
<div class="progress-bar progress-bar-warning" >20%</div>
<div class="progress-bar progress-bar-danger" >10%</div>
</div>

三．媒体对象组件
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
//基本实例
<div class="media">
<div class="media-left">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；   羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>
</div>

//媒体对象在右边
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4>

<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔； 脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；   羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>
<div class="media-right">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/small.png" alt="" class="media-object">
</div>
</div>

//媒体对象列表
<ul class="media-list">
<li class="media">
//将每个 media 存放在 media-body 内后即可
...代码较多，具体看视频
</li>
</ul>