Bootstrap进度条学习使用


Posted in Javascript onFebruary 09, 2017

本文实例为大家分享了Bootstrap进度条的具体实现代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="progress"><!--进度条-->
    <div class="progress-bar" style="width:60%">60%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:40%">40%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-info" style="width:80%">80%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:75%">75%</div>
   </div>
   <!--带条纹的动态的进度条-->
   <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:68%">68%</div>
   </div>
   <!--带堆叠效果的进度条-->
   <div class="progress">
    <div class="progress-bar" style="width:10%">10%</div>
    <div class="progress-bar progress-bar-danger" style="width:10%">40%</div>
    <div class="progress-bar progress-bar-info" style="width:20%">80%</div>
    <div class="progress-bar progress-bar-warning" style="width:30%">75%</div>
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20%">20%</div>
   </div>
  </div> 
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap进度条学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
详解浏览器渲染页面过程
Feb 09 #Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 #Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 #Javascript
Bootstrap面板学习使用
Feb 09 #Javascript
详解js的异步编程技术的方法
Feb 09 #Javascript
原生JS实现简单放大镜效果
Feb 08 #Javascript
You might like
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php中yii框架实例用法
2020/12/22 PHP
css图片自适应大小
2007/11/28 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python单元测试与测试用例简析
2019/11/09 Python
pytorch 求网络模型参数实例
2019/12/30 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
大学毕业生通用求职信
2013/09/28 职场文书
《春雨》教学反思
2014/04/24 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
经验交流材料格式
2014/12/30 职场文书
西岭雪山导游词
2015/02/06 职场文书
法律意见书范文
2015/05/20 职场文书
天河观后感
2015/06/11 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
MySQL优化之慢日志查询
2022/06/10 MySQL