编程 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控制图片等比例缩放的示例代码

Dec 24 Javascript

通过url查找a元素并点击

Apr 09 Javascript

使用AngularJS 应用访问 Android 手机的图片库

Mar 24 Javascript

Bootstrap每天必学之栅格系统（布局）

Nov 25 Javascript

node.js使用cluster实现多进程

Mar 17 Javascript

jQuery实现的鼠标经过时变宽的效果(附demo源码)

Apr 28 Javascript

js获取时间函数及扩展函数的方法

Oct 30 Javascript

AngularJS实现动态编译添加到dom中的方法

Nov 04 Javascript

jQuery中 bind的用法简单介绍

Feb 13 Javascript

简单谈谈axios中的get,post方法

Jun 25 Javascript

element-ui upload组件多文件上传的示例代码

Oct 17 Javascript

Vue中使用Lodop插件实现打印功能的简单方法

Dec 19 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

You might like

第五节--克隆

2006/11/16 PHP

解析php安全性问题中的:Null 字符问题

2013/06/21 PHP

CodeIgniter整合Smarty的方法详解

2017/08/25 PHP

thinkPHP利用ajax异步上传图片并显示、删除的示例

2018/09/26 PHP

Laravel 简单实现Ajax滚动加载示例

2019/10/22 PHP

PHP生成随机密码4种方法及性能对比

2020/12/11 PHP

JavaScript this 深入理解

2009/07/30 Javascript

js模仿html5 placeholder适应于不支持的浏览器

2013/01/13 Javascript

js比较和逻辑运算符的介绍

2013/03/10 Javascript

Jquery Post处理后不进入回调的原因及解决方法

2014/07/15 Javascript

深入浅析Node.js 事件循环

2015/12/20 Javascript

jQuery中的on与bind绑定事件区别实例详解

2017/02/28 Javascript

canvas绘制一个常用的emoji表情

2017/03/30 Javascript

jQuery返回定位插件详解

2017/05/15 jQuery

详解Angular之constructor和ngOnInit差异及适用场景

2017/06/22 Javascript

JavaScript判断浏览器和hack滚动条的写法

2017/07/23 Javascript

微信小程序报错：this.setData is not a function的解决办法

2017/09/27 Javascript

js判断节假日实例代码

2017/12/27 Javascript

Node.js笔记之process模块解读

2018/05/31 Javascript

解决vue v-for 遍历循环时key值报错的问题

2018/09/06 Javascript

vue+element实现表单校验功能

2019/05/20 Javascript

[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3

2018/06/04 DOTA

Python:合并两个numpy矩阵的实现

2019/12/02 Python

tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader

2020/02/10 Python

将pymysql获取到的数据类型是tuple转化为pandas方式

2020/05/15 Python

基于Keras 循环训练模型跑数据时内存泄漏的解决方式

2020/06/11 Python

Python如何定义有可选参数的元类

2020/07/31 Python

南非最受欢迎的时尚品牌：MRP

2016/09/18 全球购物

铭宣海淘转运：美国、日本、英国转运等全球转运公司

2019/09/10 全球购物

美国户外服装和装备购物网站：Outland USA

2020/03/22 全球购物

校园餐饮创业计划书

2014/01/10 职场文书

带香烟到学校抽的检讨书

2014/09/25 职场文书

民主生活会对照检查材料范文

2014/10/01 职场文书

实习班主任自我评价

2015/03/11 职场文书

初中生活随笔

2015/08/15 职场文书

CentOS7环境下MySQL8常用命令小结

2022/06/10 Servers