首页
所有分类
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 异常处理使用总结
Jun 21 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
详解jQuery中的deferred对象的使用（一）
May 27 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 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
Pyecharts(7) moviepy(1) compose(3) FuzzyWuzzy(1) iOS(1) Athens(1) 模型保存加载(1) 模糊匹配(1) PyTorch(1) opencv(7)
You might like
总集篇&特番节目先行播出！《SAO Alicization War of Underworld》第2季度TV动画4月25日放送！
2020/03/06 日漫
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP插入排序实现代码
2013/04/04 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python Flask-web表单使用详解
2017/11/18 Python
python3+PyQt5实现柱状图
2018/04/24 Python
使用tensorflow实现线性svm
2018/09/07 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
CHARLES & KEITH澳大利亚官网：新加坡时尚品牌
2019/01/22 全球购物
英国健身仓库：Bodybuilding Warehouse
2019/03/06 全球购物
小学毕业家长寄语
2014/01/19 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
房屋出租协议书范本（标准版）
2014/09/24 职场文书
专业见习报告范文
2014/11/03 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python