BootStrap 实现各种样式的进度条效果


Posted in Javascript onDecember 07, 2016

Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示:

看下面的例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>进度条</title>
</head>
<body>
<div>
<div class="container">
<div class="page-header">
<h1>进度条</h1>
</div>
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">progress-bar-info(20%)</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 60%">progress-bar-success(60%)</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 35%">progress-bar-danger(35%)</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 90%">progress-bar-warning(90%)</div>
</div>
<div class="progress active">
<div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-striped(66%)</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div>
<div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div>
</div>
</div>
</div>
</div>
</body>
</html>

效果如下:

BootStrap 实现各种样式的进度条效果

其中下面的一段产生了动态效果:

<div class="progress active">
<div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-warning(66%)</div>
</div>

下面一段产生了叠加效果:

<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div>
<div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div>
</div>

以上所述是小编给大家介绍的BootStrap 实现各种样式的进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript base64编码实现代码
Dec 02 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
浅谈document.write()输出样式
May 07 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 #Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 #Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 #Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 #Javascript
jquery实现文本框的禁用和启用
Dec 07 #Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 #Javascript
简单理解js的prototype属性及使用
Dec 07 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JS的反射问题
2010/04/07 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
写给女朋友的道歉信
2014/01/08 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
工程质量承诺书
2014/03/27 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
党员转正介绍人意见
2015/06/03 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers