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 克隆数组最简单的方法
Feb 12 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
JS实现4位随机验证码
Oct 19 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网站在线人数统计
2008/04/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
Vue组件开发初探
2017/02/14 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python中文件操作简明介绍
2015/04/13 Python
Python语法快速入门指南
2015/10/12 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python中logging库的使用总结
2017/10/18 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
高中生学习生活的自我评价
2013/10/09 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
合伙经营协议书
2014/04/18 职场文书
民生工作实施方案
2014/05/31 职场文书
教师考核评语大全
2014/12/31 职场文书
民事申诉状范本
2015/05/20 职场文书
怎样写观后感
2015/06/19 职场文书
运动会入场词
2015/07/18 职场文书
二年级数学教学反思
2016/02/16 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python