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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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中使用Oracle数据库(1)
2006/10/09 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
webpack入门必知必会
2017/01/16 Javascript
nodejs基础知识
2017/02/03 NodeJs
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
创立科技Java面试题
2015/11/29 面试题
班级团队活动方案
2014/08/14 职场文书
党支部对转正的意见
2015/06/02 职场文书
疾病证明书
2015/06/19 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏