首页
所有分类
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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 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
冰岛购物网站(1) 白俄罗斯购物网站(3) 约旦购物网站(1) 希腊购物网站(6) 保加利亚购物网站(3) 乌克兰购物网站(27) PHP面试题(54) 马耳他购物网站(1) 罗马尼亚购物网站(10) 哈萨克斯坦购物网站(2)
You might like
写一个用户在线显示的程序
2006/10/09 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
jquery网页加载进度条的实现
2017/06/01 jQuery
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
浅析Python函数式编程
2018/10/06 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python中shell执行知识点
2020/05/06 Python
苹果美国官方商城：Apple美国
2016/08/24 全球购物
美国顶尖折扣时尚购物网：Bluefly
2016/08/28 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
董事长职责范文
2013/11/08 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
给客户的检讨书
2014/12/21 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技