首页
所有分类
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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
一个可复用的vue分页组件
May 15 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue + axios get下载文件功能
Sep 25 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) maven(2) Navicat(1) Android Gradle(1) procedure(1) V Rising(1) 内置函数(1) 记事本(1) Tablespace(1) Spring Security(2)
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php获取网页内容方法总结
2008/12/04 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python处理cookie详解
2014/02/07 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python常见数制转换实例分析
2015/05/09 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python遍历小写英文字母的方法
2019/01/02 Python
Django之模型层多表操作的实现
2019/01/08 Python
python中import与from方法总结（推荐）
2019/03/21 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
linux系统都有哪些运行级别
2012/04/15 面试题
执行力心得体会
2013/12/31 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
九年级历史教学反思
2016/02/19 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python