Bootstrap学习笔记之进度条、媒体对象实例详解


Posted in Javascript onMarch 09, 2017

1.基础进度条

Bootstrap学习笔记之进度条、媒体对象实例详解 

要写在<div class="progress"></div>里面。

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
</div>

2.多彩进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

<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.条纹状进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

在类progress基础上添加类progress-striped如下:

<div class="progress progress-striped">
 <div class="progress-bar" style="width:30%;"></div>
</div>

4. 进度条动画样式

Bootstrap学习笔记之进度条、媒体对象实例详解

给进度条添加类active,如下:

<div class="progress progress-striped">
 <div class="progress-bar active" style="width:30%;"></div>
</div>

5.堆叠式进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

都写在一个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.媒体对象

Bootstrap学习笔记之进度条、媒体对象实例详解

媒体对象就是图文混排。左边可以是图片、视频。右边是对其描述。

<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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
js实现显示手机号码效果
Mar 09 #Javascript
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
浅谈Python type的使用
2019/11/19 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python中的面向接口编程示例详解
2021/01/17 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
公务员培训心得体会
2013/12/28 职场文书
二手书店创业计划书
2014/01/16 职场文书
二手车转让协议书
2015/01/29 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript