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基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
Vue.js学习示例分享
Feb 05 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 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脚本的10个技巧(4)
2006/10/09 PHP
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Angular2库初探
2017/03/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python实现端口转发器的方法
2015/03/13 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
新浪微博实习心得体会
2014/01/27 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
干部培训简讯
2015/07/20 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript