首页
所有分类
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 相关文章推荐
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
微信小程序 slot踩坑的解决
Apr 01 Javascript
详解Vue2的diff算法
Jan 06 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
gevent(1) pytest(3) Coroutine(1) csv(4) Excel(4) enumerate(1) find(1) list(1) greenlet(1) 进销存(1)
You might like
PHP生成随机密码类分享
2014/06/25 PHP
给ECShop添加最新评论
2015/01/07 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
jQuery圆形统计图开发实例
2015/01/04 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
Python数据类型详解（四）字典：dict
2016/05/12 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
pyqt5中动画的使用详解
2020/04/01 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
英国名牌男装店：Standout
2021/02/17 全球购物
JSF面试题：Jsf中导航的标签是什么
2013/04/20 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2014年管理工作总结
2014/11/22 职场文书
房屋维修申请报告
2015/05/18 职场文书
刑事上诉状（无罪）
2015/05/23 职场文书
对学校的意见和建议
2015/06/04 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers