# 第 11 章 進度條媒體對象和 Well 組件 **學習要點：** 1.Well 組件 2.進度條組件 3.媒體對象組件 主講教師：李炎恢 本節課我們主要學習一下 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-stripedactive" 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"> <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 src="img/small.png" alt="" class="media-object"> </div> </div> ``` //媒體對象列表 ``` <ul class="media-list"> <li class="media"> //將每個 media 存放在 media-body 內后即可 ...代碼較多，具體看視頻 </li> </ul> ```