首页
所有分类
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)不显示本地图片问题解决
Jul 05 Javascript
传智播客学习之java 反射
Nov 22 Javascript
用Javascript评估用户输入密码的强度（Knockout版）
Nov 30 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
详解如何使用router-link对象方式传递参数？
May 02 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
javscript 数组扁平化的实现
Feb 03 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
pdf(1) cypress(1) ant design(2) openGauss(1) 太阳码(1) Word(2) 延时任务(1) JDBC(3) 弹窗(1) Eclipse(1)
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
让IE8支持DOM 2（不用框架！）
2009/12/31 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python 换位密码算法的实例详解
2017/07/19 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python程序控制NAO机器人行走
2019/04/29 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
英国儿童设计师服装的领先零售商：Base
2019/03/17 全球购物
Speedo速比涛法国官方网站：泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
HOTEL INFO英国：搜索全球酒店
2019/08/08 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
上课玩手机检讨书
2014/02/08 职场文书
2014国培学习感言
2014/03/05 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript