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相关事件的几个概念
May 21 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 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 第二节 数据类型之数值型
2012/04/28 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP反向代理类代码
2014/08/15 PHP
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
薇姿法国官网:Vichy法国
2021/01/28 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
工作疏忽检讨书
2014/01/25 职场文书
授权委托书格式
2014/07/31 职场文书
上班迟到检讨书
2014/09/15 职场文书
小学生成绩单评语
2014/12/31 职场文书
英语邀请函范文
2015/02/02 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers