Bootstrap學習筆記之進度條、媒體對象執行個體詳解，bootstrap學習筆記

Bootstrap學習筆記之進度條、媒體對象執行個體詳解，bootstrap學習筆記

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內，如下：

<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>這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容這裡是常值內容</p> </div> </div> </div>

以上所述是小編給大家介紹的Bootstrap進度條、媒體對象執行個體詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！