### Well 组件
这个组件可以实现简单的嵌入效果。
**嵌入效果**
~~~html
<div class="well">
Bootstrap
</div>
~~~
**有 lg 和 sm 两种可选值**
~~~html
<div class="well well-lg"> Bootstrap
</div>
~~~
### 进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
**基本进度条**
~~~html
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%
</div>
</div>
~~~
**最低值进度条**
~~~html
<div class="progress">
<div class="progress-bar" style="min-width:20px">
0%</div>
</div>
~~~
**结合情景的进度条**
~~~html
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width: 20px; width: 60%;">60%</div>
</div>
~~~
**条纹状，IE10+支持 **
~~~html
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="min- width:20px;width:60%">60%</div>
</div>
~~~
**动画效果**
~~~html
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div>
</div>
~~~
**堆叠效果**
~~~html
<div class="progress">
<div class="progress-bar progress-bar-success" style="min-width:20px;width:35%">35%</div>
<div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div>
<div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%">10%</div>
</div>
~~~
### 媒体对象组件
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
~~~html
<div class="meida">
<div class="media-left media-top">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="meida-heading">内容标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>
</div>
</div>
~~~
**媒体对象在右边**
~~~html
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>
</div>
<div class="media-right">
<img src="img/small.png" alt="" class="media-object">
</div>
</div>
~~~
**媒体对象列表**
~~~html
<ul class="media-list">
<li class="media"> //将每个 media 存放在 media-body 内后即可
...代码较多，具体看视频
</li>
</ul>
~~~
