第 11 章 進度條媒體對象和 Well 組件

標籤：

本節課我們主要學習一下 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-successprogress-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>

 

第 11 章 進度條媒體對象和 Well 組件