首页 > 经验 > 关键词 > Bootstrap3.0学习最新资讯 > 正文

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

2015-04-08 11:57 · 稿源:aehyok博客园

查看完整教程:Bootstrap 3.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>

有意义的替换

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

条纹效果

用一个渐变可以创建条纹效果,在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>

运动效果

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

堆叠效果

把多个进度条放入同一个.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>

媒体对象

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

媒体列表

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

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

列表组

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

基本案例

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

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

徽章

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

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

链接条目

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

定制内容

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

 

面板

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

基本案例

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

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

带标题的面版

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

带脚注的面版

把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜色,因为它不是在前面的内容。

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

有意义的替换

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

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

带表格的面版

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

如果没有.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>
  • </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>

总结

对了Bootstrap的基本组件,已经简单的过了一遍,还是收获很多的。接下来就要去学习Bootstrap插件了。

网友热搜:

  • 相关推荐
  • 大家在看
  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 直播3.0时代:综艺+带货+内容如何“赢过”买买买

    用户对不同品类商品的关注点不同,带货方式也有所不同。比如罗永浩带货网红食品钟薛高跟薇娅带货卫星,梁建章带货酒店与董明珠带货家电,都会有所不同。随着直播赛道越来越拥挤,各个细分品类的直播开始呈现出不同的行业规律。

  • 鲸小喜3.0:实体店如何用会员制提高业绩?

    最近几年,会员制的发展速度可以用惊人来形容,很多大公司,都开始疯狂推会员制。2015 年,京东推出PLUS会员; 2016 年,唯品会推出超级VIP会员; 2017 年,网易考拉推出黑卡会员、苏宁易购推出SUPER会员; 2018 年,阿里推出 88 超级会员。 以上是一些互联网公司,我们再来看一看线下实体商家。 2015 年物美推出会员制超市尚佳会员店、永辉也在上海开出超市会员店; 2017 年,银泰推出付费会员365; 2019 年,中国首家Costco开市客落址

  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • 鲸小喜3.0:实体店开始复苏了,来研究一下新会员联盟--鲸鲤店

    2020 年的实体店市场可谓是如履薄冰,全国在今年倒闭的零售店不计其数。但我觉得实体店会慢慢复苏,因为电商的发展也遇到了瓶颈。近几年电商红利逐渐消失,营业费用也在不断提高,商家抱怨平台收费太高,电商法出台对网购雪上加霜,导致大批平台经营者纷纷退出投身实体店。然而如何克服传统实体店弊端,依旧是众多实体店主必须面临的思考。很多实体店商家面临着拓客,锁客,留客三大问题。在做活动的过程中,无法长期锁定客户,而?

  • 鲸小喜3.0:零售业会员制到底该怎么玩?

    会员制是帮助企业建立忠诚顾客群体的重要工具。据统计,如果一家企业至少有70%的顾客消费是由会员或回头客带来的,那么其营销活动的投入会降低很多。但绝大部分零售商并没有真正树立“既卖商品,又提供服务”的用户意识,他们仅仅是想把商品卖出去,从顾客口袋里拿到更多的钱。这样的思路下,零售业的会员制是很难做好的。通过数月的调研,我们总结出本土化会员制存在的三大问题。1. 大众普遍不适应商场会员准入制从国外引入的会员

  • Dafex 达菲创新小宇宙 AIT 3.0 引领金融科技

    随着大时代的改变与发展迁移,人工智能、大数据、云计算等新一代信息技术的发展已经成为了改变传统一尘不变的模式。DAFEX 达菲是一家全球性的专业金融技术服务提供商,用心致力于创新科技为一直保守着传统方式的金融业带来新景象。一个汇集顶尖人工智能技术及金融交易的专业平台 – 小菲达人(AIT 3.0)正是DAFEX 达菲的核心所在。小菲达人(AIT 3.0)不仅汇聚了业内专家和各大技术支持,更以区块链技术为研发领航者创建了许多人工

  • 腾讯智慧出行发布多款重磅新品 涉及车联网产品TAI 3.0等

    【TechWeb】6月24日消息,腾讯智慧出行今日发布多款新品,包括生态车联网产品TAI 3.0、全新一代自动驾驶虚拟仿真平台TAD Sim 2.0,以及汽车云数字营销解决方案、智慧交通解决方案。生态车联网产品TAI 3.0作为生态车联网战略的核心承载之一,TAI3.0在年初CES上首发亮相,此次全新发布的TAI3.0已经进化具备四大核心服务能力,即“认识和理解用户、与用户的连接和沟通、为用户连接广泛的服务生态、贯穿全生命周期的云端处理”能力。?

  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 人人App疑遭全网下架 人人App为什么被下架

    近日苹果AppStore应用商店上已经无法搜索到人人APP,疑似已经被下架,而在多个安卓应用渠道同样也无法搜索和下载,提示为“该应用内部优化中,暂不提供下载”。那么人人APP为什么被下架,官方对此如何回应呢。

  • 腾讯游戏扩大人脸识别范围,未成年人保护进入3.0阶段

    6月17日,腾讯游戏宣布自 6 月 17 日起腾讯游戏正式升级未成年人保护措施,扩大人脸识别技术应用范围,对疑似未成年人的用户进行甄别。这也意味着腾讯游戏对未成年人保护工作升级到了全新的3. 0 阶段。

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • 坚果Pro 2S/R1 Smartisan OS一步3.0功能跳票:官方致歉

    6月24日消息,Smartisan OS官方微博发布“关于R1和Pro 2S机型一步3.0功能延期的情况说明”。官方表示,原计划坚果R1、Pro 2S在2020年年初完成Smartisan OS 7.0升级,包括网友非常期

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 有味APP

    有味APP,前身为腾讯新闻极速版,产品定位是“美好生活分享平台”。产品分为首页、圈子、关注和小窝(即个人主页)四大部分,用户可在产品内发布图文内容或视频内容。

  • AppClips是什么功能 AppClips怎么使用

    苹果iOS14系统中加入了一个全新的AppClips功能,这个功能是可以让用户不下载全部应用的情况下就可以使用该应用的功能,那么AppClips是怎么使用,这里我们来了解下AppClips功能的介绍。

  • 东方福利网全新上线百福得3.0企业员工福利管理系统

    5月28日,这场在特殊时期承载着不同以往的期待,受到各方高度关注的十三届全国人大三次会议正式闭幕。在两会的诸多声音中,“新基建”和“打造数字经济新优势”一度成为社会热词。新冠疫情的爆发使得传统经济被迫按下暂停键,新基建的提出则进一步加快了企业数字化转型升级的步伐。各行各业将趁此东风,通过数字技术赋能企业商业模式、管理运营。随之而来的,是协同办公、数字营销等新兴需求的爆发和SaaS应用需求激增的趋势。近日?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议