Bootstrap學習筆記之進度條、媒體對象實例詳解

更新時間：2017年03月09日 14:42:33 作者：erdouzhang

這篇文章主要介紹了Bootstrap進度條、媒體對象實例詳解,進度條包括基礎進度條，多彩進度條，條紋狀進度條等內(nèi)容，具體實現(xiàn)代碼大家參考下本文

1.基礎進度條

這里寫圖片描述

要寫在<div class="progress"></div>里面。

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
</div>

2.多彩進度條

這里寫圖片描述

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-danger" style="width:40%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-info" style="width:50%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width:60%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width:70%;"></div>
 </div>
</div>

3.條紋狀進度條

這里寫圖片描述

在類progress基礎上添加類progress-striped如下：

<div class="progress progress-striped">
 <div class="progress-bar" style="width:30%;"></div>
</div>

4. 進度條動畫樣式

這里寫圖片描述

給進度條添加類active，如下：

<div class="progress progress-striped">
 <div class="progress-bar active" style="width:30%;"></div>
</div>

5.堆疊式進度條

這里寫圖片描述

都寫在一個progress內(nèi)，如下：

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:10%;"></div>
 <div class="progress-bar progress-bar-warning" style="width:20%;"></div>
 <div class="progress-bar progress-bar-info" style="width:30%;"></div>
</div>

6.媒體對象

這里寫圖片描述

媒體對象就是圖文混排。左邊可以是圖片、視頻。右邊是對其描述。

<div class="col-md-6">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#" rel="external nofollow" >
  <img class="media-object" src="img/02.jpg" alt="">
 </a>
 </div>
 <div class="media-body">
 <h2 class="media-heading">我是標題</h2>
 <p>這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容這里是文本內(nèi)容</p>
 </div>
 </div>
 </div>

以上所述是小編給大家介紹的Bootstrap進度條、媒體對象實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: