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 定义新对象方法
Feb 20 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
原生js实现抽奖小游戏
Jun 27 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
js简单时间比较的方法
2016/08/02 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python中的元组介绍
2019/01/28 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
大专自我鉴定范文
2013/10/01 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
小摄影师教学反思
2014/04/27 职场文书
妇女干部培训方案
2014/05/12 职场文书
教师专业自荐信
2014/05/31 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电