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入门教程(2) JS基础知识
Jan 31 Javascript
jQuery cdn使用介绍
May 08 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php 操作调试的方法
2012/07/12 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
js模拟弹出效果代码修正版
2008/08/07 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Python 私有函数的实例详解
2017/09/11 Python
python实现烟花小程序
2019/01/30 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python plotly绘制直方图实例详解
2019/07/22 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
公司活动邀请函
2014/01/24 职场文书
银行求职自荐信
2014/06/30 职场文书
甜品店创业计划书
2014/08/14 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
小学假期安全广播稿
2014/09/28 职场文书
大学四年个人总结
2015/03/03 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android