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和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
基于jquery的放大镜效果
May 30 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
jquery图形密码实现方法
Mar 11 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
You might like
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP面向对象法则
2012/02/23 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JS实现li标签的删除
2019/04/12 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python中unittest用法实例
2014/09/25 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python如何实时获取tcpdump输出
2020/09/16 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
中式餐厅创业计划书范文
2014/01/23 职场文书
医德医风自我评价
2014/09/19 职场文书
保密工作整改报告
2014/11/06 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书