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 switch case 另类写法
Mar 14 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js有关元素内容操作小结
Dec 20 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP通用检测函数集合
2011/02/08 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php时间函数用法分析
2016/05/28 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python实现疫情地图可视化
2021/02/05 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
一些Unix笔试题和面试题
2013/01/22 面试题
经理秘书岗位职责
2013/11/14 职场文书
劳动实践课感言
2014/02/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
企业法人授权委托书
2014/09/25 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang