编程 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作用域和作用域链

Oct 21 Javascript

jquery单行文字向上滚动效果的实现代码

Sep 05 Javascript

js实现window.open不被拦截的解决方法汇总

Oct 30 Javascript

[原创]Javascript 实现广告后加载可加载百度谷歌联盟广告

May 11 Javascript

VUEJS实战之构建基础并渲染出列表（1）

Jun 13 Javascript

使用Math.max,Math.min获取数组中的最值实例

Apr 25 Javascript

js实现关闭网页出现是否离开提示

Dec 07 Javascript

AngularJS动态添加数据并删除的实例

Feb 27 Javascript

200行代码实现blockchain 区块链实例详解

Mar 14 Javascript

在vue中多次调用同一个定义全局变量的实例

Sep 25 Javascript

脚手架vue-cli工程webpack的基本用法详解

Sep 29 Javascript

Vue仿微信app页面跳转动画效果

Aug 21 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

eaglephp使用微信api接口开发微信框架

2014/01/09 PHP

取得单条网站评论以数组形式进行输出

2014/07/28 PHP

PHP实现批量修改文件后缀名的方法

2015/07/30 PHP

JSON用法之将PHP数组转JS数组，JS如何接收PHP数组

2015/10/08 PHP

学习php设计模式 php实现单例模式(singleton)

2015/12/07 PHP

用javascript父窗口控制只弹出一个子窗口

2007/04/10 Javascript

javascript实现左右控制无缝滚动

2014/12/31 Javascript

javascript中caller和callee详解

2015/08/10 Javascript

Bootstrap的class样式小结

2016/12/01 Javascript

AngularJS通过ng-Img-Crop实现头像截取的示例

2017/08/17 Javascript

Vue中的验证登录状态的实现方法

2019/03/09 Javascript

在antd4.0中Form使用initialValue操作

2020/11/02 Javascript

[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局

2016/02/25 DOTA

Python中的MongoDB基本操作：连接、查询实例

2015/02/13 Python

Python去除字符串两端空格的方法

2015/05/21 Python

十个Python程序员易犯的错误

2015/12/15 Python

Python中%r和%s的详解及区别

2017/03/16 Python

如何用itertools解决无序排列组合的问题

2017/05/18 Python

Python MD5加密实例详解

2017/08/02 Python

python实现验证码识别功能

2018/06/07 Python

总结Python图形用户界面和游戏开发知识点

2019/05/22 Python

Python 实现OpenCV格式和PIL.Image格式互转

2020/01/09 Python

python实现密度聚类(模板代码+sklearn代码)

2020/04/27 Python

英国最大的宠物食品和宠物用品网上零售商： Zooplus

2016/08/01 全球购物

德国PC硬件网站：CASEKING

2016/10/20 全球购物

建筑施工实习自我鉴定

2013/09/19 职场文书

教师求职信范文分享

2013/12/27 职场文书

2015年幼儿园毕业感言

2014/02/12 职场文书

各营销点岗位职责范本

2014/03/05 职场文书

股权转让意向书

2014/04/01 职场文书

幼儿教师自我剖析材料

2014/09/29 职场文书

小学教师自我评价

2015/03/04 职场文书

大学学生会辞职信

2015/05/13 职场文书

文艺演出主持词

2015/07/01 职场文书

大学三好学生主要事迹范文

2015/11/03 职场文书

《金色的草地》教学反思

2016/02/17 职场文书