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 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
PHP数据库操作面向对象的优点
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP教程 基本语法
2009/10/23 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python socket模块方法实现详解
2019/11/05 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
PHP面试题及答案一
2012/06/18 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
秋季运动会广播稿
2014/02/22 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2015最新民情日记范文
2015/06/26 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
java实现web实时消息推送的七种方案
2022/07/23 Java/Android