快捷導(dǎo)航

Bootstrap學(xué)習(xí)筆記之進(jìn)度條、媒體對(duì)象實(shí)例詳解

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

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

1.基礎(chǔ)進(jìn)度條

這里寫(xiě)圖片描述

要寫(xiě)在<div class="progress"></div>里面。

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

2.多彩進(jìn)度條

這里寫(xiě)圖片描述

<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.條紋狀進(jìn)度條

這里寫(xiě)圖片描述

在類(lèi)progress基礎(chǔ)上添加類(lèi)progress-striped如下：

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

4. 進(jìn)度條動(dòng)畫(huà)樣式

這里寫(xiě)圖片描述

給進(jìn)度條添加類(lèi)active，如下：

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

5.堆疊式進(jìn)度條

這里寫(xiě)圖片描述

都寫(xiě)在一個(gè)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.媒體對(duì)象

這里寫(xiě)圖片描述

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

<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">我是標(biāo)題</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進(jìn)度條、媒體對(duì)象實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: