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中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
npm全局环境变量配置详解
Dec 15 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python 多进程队列数据处理详解
2019/12/23 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
清明节演讲稿
2014/05/27 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
自查自纠整改报告
2014/11/06 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android