### 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>
~~~
