首页
所有分类
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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
js里的prototype使用示例
Nov 19 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
Javascript操作表单实例讲解（下）
Jun 20 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
axios基本入门用法教程
Mar 25 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
js 压缩图片的示例（只缩小体积，不更改图片尺寸）
Oct 21 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
追加文本(1) flex(1) 选择器(1) 匹配文本(1) 文字识别(1) GNN(1) canvas(2) flex-shrink(1) SFTP(3) 图片模糊(1)
You might like
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
jQuery实现下拉框左右移动（全部移动，已选移动）
2016/04/15 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python多线程的退出控制实现
2020/08/10 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
HTML5+CSS3实例 ：canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
NICKIS.com荷兰：设计师儿童时装
2020/01/08 全球购物
期末复习计划
2015/01/19 职场文书
机动车交通事故协议书
2015/01/29 职场文书
确保工程质量承诺书
2015/04/29 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
php实例化对象的实例方法
2021/11/17 PHP
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers