首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本组件学习笔记之进度条(15)

Posted in Javascript onDecember 08, 2016

Bootstrap提供了各式各样的进度条。

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>进度条</title>
</head>
<body>
<div>
 <div class="container">
 <div class="page-header">
 <h1>进度条</h1>
 </div>
 <div class="col-lg-10">
 <div class="progress">
 <div class="progress-bar progress-bar-info" style="width: 20%">progress-bar-info(20%)</div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 60%">progress-bar-success(60%)</div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-danger" style="width: 35%">progress-bar-danger(35%)</div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 90%">progress-bar-warning(90%)</div>
 </div>
 <div class="progress active">
 <div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-striped(66%)</div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div>
 <div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div>
 <div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之进度条(15)

其中下面的一段产生了动态效果：

<div class="progress active">
 <div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-warning(66%)</div>
</div>

下面一段产生了叠加效果：

<div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div>
 <div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div>
 <div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div>
</div>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本组件学习笔记之进度条(15)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JavaScript正则表达式函数总结（常用）
Feb 22 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 #Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 #Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 #Javascript
浅谈Node.js：fs文件系统模块
Dec 08 #Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 #Javascript
ICF-SW55(1) PHILIPS(3) D1875(1) L4X25T(1) 德劲1103(3) D1835(1) 德生9700DX(1) 德生PL330(2) ICF-SW7600GR(1) 飞利浦(2)
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
关于恒等于（===）和非恒等于（!==）
2007/08/20 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python自动发送邮件脚本
2018/06/20 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python字典按照value排序方法
2020/12/28 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站：cosme shopping
2019/08/28 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android
vue实现简易音乐播放器
2022/08/14 Vue.js