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 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
详解Vue的sync修饰符
May 15 Vue.js
详解浏览器渲染页面过程
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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JS跨域代码片段
2012/08/30 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
javascript常用功能汇总
2015/07/05 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
协议书格式
2014/04/23 职场文书
咖啡店创业计划书
2014/08/15 职场文书
学习十八大标语
2014/10/09 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
校运会宣传稿大全
2015/07/23 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书