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