首页
所有分类
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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
JavaScript 特殊字符
Apr 05 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
详解小程序毫秒级倒计时（适用于拼团秒杀功能）
May 05 Javascript
微信小程序云开发详细教程
May 16 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
详解浏览器渲染页面过程
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
Logrotate(1) timestamp(1) 重复数据(2) 临时表(1) 黑名单(1) 批处理(1) T-SQL(1) NFS(1) ftpserver(1) 排序失效(1)
You might like
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
调试php程序的简单步骤
2019/10/04 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
JavaScript延迟加载
2021/03/09 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python Property属性的2种用法
2015/06/21 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python实现ip代理池功能示例
2019/07/05 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
PHP面试题及答案二
2015/05/23 面试题
MIS软件工程师的面试题
2016/04/22 面试题
精彩的推荐信范文
2013/11/26 职场文书
市场营销管理制度
2014/01/29 职场文书
服务承诺书怎么写
2014/05/24 职场文书
党的作风建设心得体会
2014/10/22 职场文书
大学生支教感言
2015/08/01 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
JavaScript实现简单计时器
2021/06/22 Javascript
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
java executor包参数处理功能 
2022/02/15 Java/Android