当前位置:首页 > SEO优化 > Bootstrap3.0学习教程十六:进度条、媒体对象、列表组、面板

Bootstrap3.0学习教程十六:进度条、媒体对象、列表组、面板

admin 3年前 327 0

查看完整教程:

本文主要来讲解以下内容

1.进度条

2.媒体对象

3.列表组

4.面板

5.总结

进度条

提供工作或动作的实时反馈,只用简单且灵活的进度条。

跨浏览器兼容性

进度条使用了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张

运动效果

给.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张

媒体对象

这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右对齐的图片(就像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张

媒体列表

用一点点额外的标记,就能在列表内使用媒体(对评论或文章列表很有用)。

  • <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张

列表组

列表组是灵活又强大的组件,不仅仅用于显示简单的成列表的元素,还用于复杂的定制的内容。

基本案例

最简单的列表只是无顺序列表,列表条目和正确的类。

  • <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张

徽章

给列表组加入徽章,它会自动地放在右面。

  • <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张

链接条目

用<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张

定制内容

在里面可以加几乎任何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张

面板

虽然不总是必须,但是某些时候你可能需要将某些内容放到一个盒子里。对于这种情况,可以试试面板组件。

基本案例

默认的.panel所做的只是提供基本的边界和内部,来包含内容。

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

Bootstrap3.0学习教程十六:进度条、媒体对象、列表组、面板 SEO优化 第14张

带标题的面版

用.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张

有意义的替换

像其它组件一样,可以简单地通过加入有意义的状态类,给特定的内容使用更有意义的面版。

  • <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张

带表格的面版

为了无缝的设计,在面版中加入.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张

 

发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

移动站点站内优化Checklist

移动站点站内优化Checklist

随着移动流量的与日俱增,移动搜索引擎的功能越来越丰富,意味着更多移动特性可以施展,同时也意味着对HTML5网站的要求更趋规范和严格,这对于负责移动站点优化的负责人来说是个极大的挑战。本...

新人如何写企业网站优化方案

新人如何写企业网站优化方案

文/麦小迪蒂很多人都在企业做优化,一个人身兼数职,经常都是孤军奋战,以至于做了一段时间人都疲惫不堪了。后面慢慢不知道怎么去做优化排名了?其实这种现象小麦建议小伙伴们花点时间写个优化方案...

淘宝SEO三部曲:二个月日访客700到30000

淘宝SEO三部曲:二个月日访客700到30000

 对于一个店铺的运营推广来说,如果说有什么是比做好直通车和钻展更重要的,那一定是搜索优化。在深入了解SEO之后,才发现它是如此复杂且有逻辑性,对一个...

淘宝干货:直通车引爆全店10万免费无线搜索流量

淘宝干货:直通车引爆全店10万免费无线搜索流量

    先来列一下数据。我的10万U...

SEO挖掘:图片搜索引擎能否提升网站内容排名?

SEO挖掘:图片搜索引擎能否提升网站内容排名?

图搜,即图片搜索引擎,是存在主流之外的但又有效的SEO优化手段。常见如Google图片、百度图片、搜狗图片。为求精炼,科易网小编直接以例子说明图搜可以带来的一些好处...

随机应变的百度排名策略

随机应变的百度排名策略

文/小丹以不变应万变的传统SEO技术已经落伍了,要想快速提升网站排名,稳定网站排名,一定要根据行业优化环境策略和行业用户需求来进行。那什么样的操作才能即快捷又稳定呢?笔者小丹今天为大家...

利用B2B店铺做排名截获长尾关键词流量最佳

利用B2B店铺做排名截获长尾关键词流量最佳

    做搜索营销流量增长的公式无非就是国平老师提到的3点:收录×排名×点击,后来又有人在这个公式之上加了一条,那就是关键词词库,或者叫关键词数量。其实这四点...

你说SEO老套?但它有它的用处

你说SEO老套?但它有它的用处

12月14日讯SEO是指在了解搜索引擎自然排名机制的基础之上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中关键词的自然排名,获得更多的展现量,吸引更多目标客户点击访问网站,从而达到互联...