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

初学prototype,发个JS接受URL参数的代码

Sep 25 Javascript

取得传值的函数

Oct 27 Javascript

JS 拼图游戏面向对象，注释完整。

Jun 18 Javascript

jquery remove方法应用详解

Nov 22 Javascript

js菜单点击显示或隐藏效果的简单实例

Jan 13 Javascript

JQuery插件iScroll实现下拉刷新，滚动翻页特效

Jun 22 Javascript

JavaScript实现添加及删除事件的方法小结

Aug 04 Javascript

JQuery和HTML5 Canvas实现弹幕效果

Jan 04 Javascript

微信小程序实现tab页面切换功能

Jul 13 Javascript

Javascript和jquery在selenium的使用过程

Oct 31 jQuery

JavaScript设计模式--简单工厂模式定义与应用案例详解

May 23 Javascript

vue-cli3访问public文件夹静态资源报错的解决方式

Sep 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

You might like

PHP安全配置详细说明

2011/09/26 PHP

php使用Jpgraph创建折线图效果示例

2017/02/15 PHP

为jquery的ajaxfileupload增加附加参数的方法

2014/03/04 Javascript

谈谈AngularJs中的隐藏和显示

2015/12/09 Javascript

JavaScript自定义函数实现查找两个字符串最长公共子串的方法

2016/11/24 Javascript

AngularJS全局警告框实现方法示例

2017/05/18 Javascript

详解react如何在组件中获取路由参数

2017/06/15 Javascript

详解JavaScript按概率随机生成事件

2017/08/02 Javascript

vuejs 切换导航条高亮(路由菜单高亮)的方法示例

2018/05/29 Javascript

vue-router+nginx 非根路径配置方法

2018/06/30 Javascript

vue中子组件调用兄弟组件方法

2018/07/06 Javascript

Vue.js实现表格渲染的方法

2018/09/07 Javascript

js核心基础之构造函数constructor用法实例分析

2019/05/11 Javascript

nuxt.js添加环境变量,区分项目打包环境操作

2020/11/06 Javascript

微信小程序实现锚点跳转

2020/11/23 Javascript

python实现类的静态变量用法实例

2015/05/08 Python

Python sys.argv用法实例

2015/05/28 Python

Python3 chardet模块查看编码格式的例子

2019/08/14 Python

Python的条件锁与事件共享详解

2019/09/12 Python

python中树与树的表示知识点总结

2019/09/14 Python

Python any()函数的使用方法

2019/10/28 Python

解决pycharm最左侧Tool Buttons显示不全的问题

2019/12/17 Python

flask利用flask-wtf验证上传的文件的方法

2020/01/17 Python

一款纯css3实现的动画加载导航

2014/10/08 HTML / CSS

html5/css3响应式页面开发总结

2018/10/16 HTML / CSS

html5触摸事件判断滑动方向的实现

2018/06/05 HTML / CSS

Tory Burch美国官方网站：美国时尚生活品牌

2016/08/01 全球购物

英国男士时尚网站：Dandy Fellow

2018/02/09 全球购物

个人安全生产承诺书

2014/05/22 职场文书

个人委托书怎么写

2014/09/17 职场文书

社区综治工作汇报

2014/10/27 职场文书

淮阳太昊陵导游词

2015/02/10 职场文书

小学生光盘行动倡议书

2015/04/28 职场文书

投标单位介绍信

2015/05/05 职场文书

超市员工管理制度

2015/08/06 职场文书

JavaScript前端面试组合函数

2022/06/21 Javascript