首页
所有分类
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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 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
pt-archiver(1) B+树(2) ICF-5900W(2) Spring-Retry(1) 忘记密码(1) TcpServer(1) EventBus(1) Fragment(1) instantclient(1) muduo(1)
You might like
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
pycharm 使用心得（六）进行简单的数据库管理
2014/06/06 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
python 读取、写入txt文件的示例
2020/09/27 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
中国酒类在线零售网站：酒仙网
2016/08/20 全球购物
365 Tickets英国：全球景点门票
2019/07/06 全球购物
写好自荐信的技巧
2013/11/08 职场文书
考试诚信承诺书
2014/05/23 职场文书
优秀范文：读《红岩》有感3篇
2019/10/14 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android