首页
所有分类
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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
详解JavaScript基于面向对象之创建对象（1）
Dec 10 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
超轻量级的js时间库miment使用解析
Aug 02 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
Vue3(1) 连接器(1) OutputStream(1) vuex(1) kafka(2) 高动态范围(1) InputStream(1) axios(1) HDR(1) 曝光融合(1)
You might like
PHP的FTP学习（一）[转自奥索]
2006/10/09 PHP
PHP中GET变量的使用
2006/10/09 PHP
一个简单的PHP入门源程序
2006/10/09 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php开发留言板的CRUD(增，删，改，查)操作
2012/04/19 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python基于execjs运行js过程解析
2020/11/27 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
英国最大的专业户外零售商：Mountain Warehouse
2018/06/06 全球购物
耐克亚太地区：Nike APAC
2019/12/07 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL