编程 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 相关文章推荐

JQuery 常用操作代码

Mar 14 Javascript

通过一段代码简单说js中的this的使用

Jul 23 Javascript

兼容ie、firefox的图片自动缩放的css跟js代码分享

Aug 12 Javascript

jQuery使用之标记元素属性用法实例

Jan 19 Javascript

JS实现动态增加和删除li标签行的实例代码

Oct 16 Javascript

jQuery下拉菜单的实现代码

Nov 03 Javascript

vue登录注册及token验证实现代码

Dec 14 Javascript

详解Vue中localstorage和sessionstorage的使用

Dec 22 Javascript

JS兼容所有浏览器的DOMContentLoaded事件

Jan 12 Javascript

Vue双向绑定实现原理与方法详解

May 07 Javascript

js 实现碰撞检测的示例

Oct 28 Javascript

vue3获取当前路由地址

Feb 18 Vue.js

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

PHP下常用正则表达式整理

2010/10/26 PHP

PHP setTime 设置当前时间的代码

2012/08/27 PHP

PHP curl 并发最佳实践代码分享

2012/09/05 PHP

php实现微信公众号无限群发

2015/10/11 PHP

php微信公众平台开发（四）回复功能开发

2016/12/06 PHP

如何修改yii2.0自带的user表为其它的表

2017/08/01 PHP

JS 退出系统并跳转到登录界面的实现代码

2013/06/29 Javascript

jquery实现可横向和竖向展开的动态下滑菜单效果

2015/08/24 Javascript

html+js+highcharts绘制圆饼图表的简单实例

2016/08/04 Javascript

jQuery实现两列等高并自适应高度

2016/12/22 Javascript

JS排序之快速排序详解

2017/04/08 Javascript

JS实现的input选择图片本地预览功能示例

2018/08/29 Javascript

JavaScript 处理树数据结构的方法示例

2019/06/16 Javascript

详解微信小程序支付流程与梳理

2019/07/16 Javascript

keep-alive保持组件状态的方法

2020/12/02 Javascript

[52:03]DOTA2-DPC中国联赛正赛 Ehome vs iG BO3 第三场 1月31日

2021/03/11 DOTA

python格式化字符串实例总结

2014/09/28 Python

Python实现把xml或xsl转换为html格式

2015/04/08 Python

基于Python3 逗号代码和字符图网格(详谈)

2017/06/22 Python

详解django中url路由配置及渲染方式

2019/02/25 Python

python使用wxpy实现微信消息防撤回脚本

2019/04/29 Python

Django 解决distinct无法去除重复数据的问题

2020/05/20 Python

如何用Python 加密文件

2020/09/10 Python

Python tkinter之Bind（绑定事件）的使用示例

2021/02/05 Python

意大利领先的线上奢侈品销售电商：Eleonora Bonucci

2017/10/17 全球购物

伦敦眼门票在线预订：London Eye

2018/05/31 全球购物

介绍一下Make? 为什么使用make

2016/07/31 面试题

传播学毕业生求职信

2013/10/11 职场文书

大二学生职业生涯规划书

2014/02/05 职场文书

社区消防工作实施方案

2014/03/21 职场文书

2014年寒假社会实践活动心得体会

2014/04/07 职场文书

幼儿园清明节活动总结

2014/07/04 职场文书

校长创先争优承诺书

2014/08/30 职场文书

2014年庆祝国庆65周年演讲稿

2014/09/21 职场文书

购房协议书范本

2014/10/02 职场文书

Python关于OS文件目录处理的实例分享

2021/05/23 Python