第 11 章 進度條媒體物件和 Well 元件

水之原發表於2016-04-24
原文網址 : https://www.cnblogs.com/zfc2201/p/5426795.html
物件元件

學習要點：

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>

相關文章