第 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>

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