Bootstrap 進度條媒體對象和 Well 組件

一．Well 組件
這個組件可以實現簡單的嵌入效果。
//嵌入效果
<div class="well"> Bootstrap
</div>

//有 lg 和 sm 兩種可選值
<div class="well well-lg"> Bootstrap
</div>

二．進度條組件
進度條組件為當前工作流程或動作提供時時反饋。
//基本進度條
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>

//最低值進度條
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>

//結合情景的進度條
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:60%">60%</div>
</div>

//條紋狀，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>

//動畫效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div>
</div>

//堆疊效果
<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>

三．媒體對象組件
媒體對象可以包含圖片、視頻或音頻等媒體，以達到對象和文本組合顯示的樣式效果。
//基本實例
<div class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h5 class="media-heading">標題</h5>
<p>企鵝（學名：Spheniscidae）：有“海洋之舟”美稱的企鵝是一種最古老的游禽，它們很可能在地球穿上冰甲之前，就已經在南極安家落戶。全世界的企鵝共有 17 種，大多數都分布在南半球。主要生活在南半球，屬于企鵝目，企鵝科。特征為不能飛翔； 腳生于身體最下部，故呈直立姿勢；趾間有蹼；跖行性（其他鳥類以趾著地）；前肢成鰭狀； 羽毛短，以減少摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個種的主要區別在于頭部色型和個體大小。</p>
</div>
</div>

//媒體對象在右邊
<div class="media">
<div class="media-body">
<h5 class="media-heading">標題</h5>

<p>企鵝（學名：Spheniscidae）：有“海洋之舟”美稱的企鵝是一種最古老的游禽，它們很可能在地球穿上冰甲之前，就已經在南極安家落戶。全世界的企鵝共有 17 種，大多數都分布在南半球。主要生活在南半球，屬于企鵝目，企鵝科。特征為不能飛翔； 腳生于身體最下部，故呈直立姿勢；趾間有蹼；跖行性（其他鳥類以趾著地）；前肢成鰭狀； 羽毛短，以減少摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個種的主要區別在于頭部色型和個體大小。</p>
</div>
<div class="media-right">
<img src="img/small.png" alt="" class="media-object">
</div>
</div>

//媒體對象列表
<ul class="media-list">
<li class="media">
//將每個 media 存放在 media-body 內后即可
...代碼較多，具體看視頻
</li>
</ul>