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

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