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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
第八节 访问方式 [8]
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php制作文本式留言板
2015/03/18 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
win7下python3.6安装配置方法图文教程
2018/07/31 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
商场中秋节广播稿
2014/01/17 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
仓库主管岗位职责
2014/03/02 职场文书
爱护草坪标语
2014/06/24 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Python数据类型最全知识总结
2021/05/31 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python