首页
所有分类
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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
js实现验证码功能
Jul 24 Javascript
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
二维码(2) Post(1) 条码(1) Word(2) 日志(1) 延时任务(1) 太阳码(1) openGauss(1) JDBC(3) Eclipse(1)
You might like
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
关于文本限制字数的js代码
2007/04/02 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python re模块常见用法例举
2021/03/01 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
日本著名的平价时尚女性购物网站：Fifth
2016/08/24 全球购物
欧舒丹英国官网：购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
求职信需要的五点内容
2014/02/01 职场文书
大学毕业感言一句话
2014/02/06 职场文书
体育节口号
2014/06/19 职场文书
商务英语求职信范文
2015/03/19 职场文书
考勤制度通知
2015/04/25 职场文书
初级职称评定工作总结
2015/08/13 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技