首頁 > SEO優化 > Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板

2015-04-09 admin SEO優化 0人評論 45824

查看完整教程:

3分快3 本文主要來講解以下內容

1.進度條

2.媒體對象

3.列表組

4.面板

5.總結

進度條

提供工作或動作的實時反饋,只用簡單且靈活的進度條。

跨瀏覽器兼容性

3分快3 進度條使用了CSS3的transition和animation屬性來完成一些效果。這些特性在Internet Explorer 9或以下版本中、Firefox的老版本中沒有被支持。Opera 12不支持znimation屬性。

基本案例

默認的進度條。

  • <div class="progress">
  • <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  • <span class="sr-only">60% Complete</span>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第1張

有意義的替換

  • <div class="progress">
  • <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  • <span class="sr-only">40% Complete (success)</span>
  • </div>
  • </div>
  • <div class="progress">
  • <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  • <span class="sr-only">20% Complete</span>
  • </div>
  • </div>
  • <div class="progress">
  • <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  • <span class="sr-only">60% Complete (warning)</span>
  • </div>
  • </div>
  • <div class="progress">
  • <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  • <span class="sr-only">80% Complete</span>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第2張

條紋效果

用一個漸變可以創建條紋效果,在IE8中不可用。

  • <div class="progress progress-striped">
  • <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  • <span class="sr-only">40% Complete (success)</span>
  • </div>
  • </div>
  • <div class="progress progress-striped">
  • <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  • <span class="sr-only">20% Complete</span>
  • </div>
  • </div>
  • <div class="progress progress-striped">
  • <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  • <span class="sr-only">60% Complete (warning)</span>
  • </div>
  • </div>
  • <div class="progress progress-striped">
  • <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  • <span class="sr-only">80% Complete (danger)</span>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第3張

運動效果

3分快3 給.progress-striped加上.active使它由右向左運動。

  • <div class="progress progress-striped active">
  • <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
  • <span class="sr-only">45% Complete</span>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第4張

堆疊效果

把多個進度條放入同一個.progress,使它們堆疊。

  • <div class="progress">
  • <div class="progress-bar progress-bar-success" style="width: 35%">
  • <span class="sr-only">35% Complete (success)</span>
  • </div>
  • <div class="progress-bar progress-bar-warning" style="width: 20%">
  • <span class="sr-only">20% Complete (warning)</span>
  • </div>
  • <div class="progress-bar progress-bar-danger" style="width: 10%">
  • <span class="sr-only">10% Complete (danger)</span>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第5張

媒體對象

3分快3 這是一個抽象的樣式,用以構建不同類型的組件,這些組件都具有在文本內容的左或右對齊的圖片(就像blog內容或Tweets等)。

默認媒體

默認的媒體允許在一個內容塊的左邊或右邊浮動一個媒體對象(圖像,視頻,音頻)

  • <div class="media">
  • <a class="pull-left" href="#">
  • <img class="media-object" src="http://placehold.it/64x64" alt="...">
  • </a>
  • <div class="media-body">
  • <h4 class="media-heading">Media heading</h4>
  • <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第6張

媒體列表

3分快3 用一點點額外的標記,就能在列表內使用媒體(對評論或文章列表很有用)。

  • <ul class="media-list">
  • <li class="media">
  • <a class="pull-left" href="#">
  • <img class="media-object" src="http://placehold.it/64x64" alt="...">
  • </a>
  • <div class="media-body">
  • <h4 class="media-heading">Media heading</h4>
  • <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • <ul class="media-list">
  • <li class="media">
  • <a class="pull-left" href="#">
  • <img class="media-object" src="http://placehold.it/64x64" alt="...">
  • </a>
  • <div class="media-body">
  • <h4 class="media-heading">Media heading</h4>
  • <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • <ul class="media-list">
  • <li class="media">
  • <a class="pull-left" href="#">
  • <img class="media-object" src="http://placehold.it/64x64" alt="...">
  • </a>
  • <div class="media-body">
  • <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div>
  • </li>
  • </ul>
  • </div>
  • </li>
  • <li class="media">
  • <a class="pull-left" href="#">
  • <img class="media-object" src="http://placehold.it/64x64" alt="...">
  • </a>
  • <div class="media-body">
  • <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div>
  • </li>
  • </ul>
  • </div>
  • </li>
  • </ul>

View Code

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第7張Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第8張

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第9張

列表組

3分快3 列表組是靈活又強大的組件,不僅僅用于顯示簡單的成列表的元素,還用于復雜的定制的內容。

基本案例

最簡單的列表只是無順序列表,列表條目和正確的類。

  • <ul class="list-group">
  • <li class="list-group-item">Cras justo odio</li>
  • <li class="list-group-item">Dapibus ac facilisis in</li>
  • <li class="list-group-item">Morbi leo risus</li>
  • <li class="list-group-item">Porta ac consectetur ac</li>
  • <li class="list-group-item">Vestibulum at eros</li>
  • </ul>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第10張

徽章

3分快3 給列表組加入徽章,它會自動地放在右面。

  • <ul class="list-group">
  • <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
  • <li class="list-group-item"><span class="badge">33</span>Dapibus ac facilisis in</li>
  • <li class="list-group-item"><span class="badge">11</span>Morbi leo risus</li>
  • <li class="list-group-item"><span class="badge">41</span>Porta ac consectetur ac</li>
  • <li class="list-group-item"><span class="badge">21</span>Vestibulum at eros</li>
  • </ul>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第11張

鏈接條目

3分快3 用<a>標簽而不是<li>標簽(也就是說父元素是<div>而不是<ul>)。沒必要給每個元素都加一個父元素。

  • <div class="list-group">
  • <a href="#" class="list-group-item active"> Cras justo odio </a>
  • <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  • <a href="#" class="list-group-item">Morbi leo risus</a>
  • <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  • <a href="#" class="list-group-item">Vestibulum at eros</a>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第12張

定制內容

3分快3 在里面可以加幾乎任何HTML,甚至是像下面的帶鏈接的列表組。

  • <div class="list-group">
  • <a href="#" class="list-group-item active">
  • <h4 class="list-group-item-heading">List group item heading</h4>
  • <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • </a>
  • <a href="#" class="list-group-item">
  • <h4 class="list-group-item-heading">List group item heading</h4>
  • <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • </a>
  • <a href="#" class="list-group-item">
  • <h4 class="list-group-item-heading">List group item heading</h4>
  • <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  • </a>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第13張

面板

3分快3 雖然不總是必須,但是某些時候你可能需要將某些內容放到一個盒子里。對于這種情況,可以試試面板組件。

基本案例

3分快3 默認的.panel所做的只是提供基本的邊界和內部,來包含內容。

  • <div class="panel panel-default">
  • <div class="panel-body"> Basic panel example </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第14張

帶標題的面版

3分快3 用.panel-heading可以簡單地加入一個標題容器。您也可以用<h1>-<h6>和.panel-title類加入預定義樣式的標題。

  • <div class="panel panel-default">
  • <div class="panel-heading">Panel heading without title</div>
  • <div class="panel-body"> Panel content </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第15張

帶腳注的面版

把按鈕或次要的文本放入.panel-footer。注意面版的腳注不會從帶意義的替換中繼承顏色,因為它不是在前面的內容。

  • <div class="panel panel-default">
  • <div class="panel-body"> Panel content </div>
  • <div class="panel-footer">Panel footer</div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第16張

有意義的替換

3分快3 像其它組件一樣,可以簡單地通過加入有意義的狀態類,給特定的內容使用更有意義的面版。

  • <div class="panel panel-primary">
  • <div class="panel-heading">Panel heading without title</div>
  • <div class="panel-body"> Panel content </div>
  • </div>
  • <div class="panel panel-success">
  • <div class="panel-heading">Panel heading without title</div>
  • <div class="panel-body"> Panel content </div>
  • </div>
  • <div class="panel panel-info">
  • <div class="panel-heading">Panel heading without title</div>
  • <div class="panel-body"> Panel content </div>
  • </div>
  • <div class="panel panel-warning">
  • <div class="panel-heading">Panel heading without title</div>
  • <div class="panel-body"> Panel content </div>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第17張

帶表格的面版

3分快3 為了無縫的設計,在面版中加入.table。如果有.panel-body,就在表格的上方加上一個用于分割的邊界。

  • <div class="panel panel-default">
  • <!-- Default panel contents -->
  • <div class="panel-heading">Panel heading</div>
  • <div class="panel-body">
  • <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  • <table class="table">  
  • <thead>  
  • <tr>  
  • <th>First Name</th>  
  • <th>Last Name</th>
  • <th>User Name</th>  
  • </tr>  
  • </thead>  
  • <tbody>  
  • <tr>  
  • <td>aehyok</td>  
  • <td>leo</td>
  • <td>@aehyok</td>  
  • </tr>
  • <tr>  
  • <td>lynn</td>  
  • <td>thl</td>
  • <td>@lynn</td>  
  • </tr>
  • </tbody>  
  • </table>  
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第18張

如果沒有.panel-body,面版標題會和表格連接起來,沒有空隙。

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第19張

帶列表組的面版

  • <div class="panel panel-default">
  • <!-- Default panel contents -->
  • <div class="panel-heading">Panel heading</div>
  • <div class="panel-body">
  • <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  • </div>
  • <ul class="list-group">
  • <li class="list-group-item">Cras justo odio</li>
  • <li class="list-group-item">Dapibus ac facilisis in</li>
  • <li class="list-group-item">Morbi leo risus</li>
  • <li class="list-group-item">Porta ac consectetur ac</li>
  • <li class="list-group-item">Vestibulum at eros</li>
  • </ul>
  • </div>

Bootstrap3.0學習教程十六:進度條、媒體對象、列表組、面板  SEO優化  第20張

 

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您