Bootstrap学习笔记之进度条、媒体对象实例详解
更新时间：2017年03月09日 14:42:33 作者：erdouzhang
这篇文章主要介绍了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进度条、媒体对象实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JavaScript中Array数组常用方法(附上相应的用法及示例)
这篇文章主要给大家介绍了关于JavaScript中Array数组常用方法,文中附上相应的用法及示例,需要的朋友可以参考下2024-01-01
IE图片缓存document.execCommand("BackgroundImageCache",
IE6下设置背景图片是不会被真正cache住的，就算服务器做了cache，如果想cache住只能2011-03-03
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
这篇文章主要介绍了JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值的相关资料,需要的朋友可以参考下2018-10-10
下面小编就为大家带来一篇JavaScript中闭包之浅析解读(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了js异步上传多张图片插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10![javascript[js]获取url参数的代码](//img.jbzj.com/images/xgimg/bcimg5.png)
多浏览器兼容用javascript获取url参数的方法比较推荐的一种2007-10-10
可以支持多中格式的JS键盘...2007-05-05
这篇文章主要介绍了js实现将选中值累加到文本框的方法,涉及javascript动态操作页面元素结点的相关技巧,非常简单实用,需要的朋友可以参考下2015-08-08
JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)
阅读了本书第五章关于使用JavaScript的最佳实践，大部分的建议之前都有耳闻，不过阅读之后有更深的体会2013-10-10
在uniapp中使用axios进行请求时,uniapp无法使用axios的适配器,下面这篇文章主要给大家介绍了关于uniapp封装axios的详细过程,需要的朋友可以参考下2022-10-10
![javascript[js]获取url参数的代码](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论