首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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进度条学习使用

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

Bootstrap进度条学习使用

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
两个SUBMIT按钮，如何区分处理
Aug 22 Javascript
一个可以显示阴历的JS代码
Mar 05 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
学习AngularJs:Directive指令用法（完整版）
Apr 26 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 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
redis shake(1) 窗口函数(3) ipyvizzu(1) 阿里云(6) 数据同步(1) 排名(1) 分析统计(1) matplotlib(7) 速龙(1) 条形图(1)
You might like
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
javascript折半查找详解
2015/01/26 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python与php实现分割文件代码
2017/03/06 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python实现装饰器、描述符
2018/02/28 Python
pandas值替换方法
2018/07/10 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
德国童装购物网站：NICKI´S.com
2018/04/20 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
不打扫卫生检讨书
2014/02/12 职场文书
赔偿协议书
2015/01/27 职场文书
休假证明书
2015/06/24 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python