编程 Javascript

BootStrap 实现各种样式的进度条效果

Posted in Javascript onDecember 07, 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 实现各种样式的进度条效果

其中下面的一段产生了动态效果：

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

以上所述是小编给大家介绍的BootStrap 实现各种样式的进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap 实现各种样式的进度条效果

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

xml 封装与解析(javascript和C#中)

Jul 26 Javascript

Dom 结点创建基础知识

Oct 01 Javascript

使用时间戳解决ie缓存的问题

Aug 20 Javascript

js实例属性和原型属性示例详解

Nov 23 Javascript

jQuery中get()方法用法实例

Dec 27 Javascript

JavaScript版的TwoQueues缓存模型

Dec 29 Javascript

jquery 属性选择器（匹配具有指定属性的元素）

Sep 06 Javascript

Bootstrap栅格系统学习笔记

Nov 25 Javascript

livereload工具实现前端可视化开发【推荐】

Dec 23 Javascript

JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)

Mar 29 Javascript

微信小程序城市定位的实现实例（获取当前所在国家城市信息）

May 17 Javascript

详解小程序开发经验：多页面数据同步

May 18 Javascript

DropDownList实现可输入可选择（两种版本可选）

Dec 07 #Javascript

BootstrapValidator超详细教程(推荐)

Dec 07 #Javascript

利用jquery实现验证输入的是否是数字、小数，包含保留几位小数

Dec 07 #Javascript

利用jquery实现下拉框的禁用与启用

Dec 07 #Javascript

jquery实现文本框的禁用和启用

Dec 07 #Javascript

浅析jQuery操作select控件的取值和设值

Dec 07 #Javascript

简单理解js的prototype属性及使用

Dec 07 #Javascript