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

js技巧--转义符"\"的妙用

Jan 09 Javascript

jquery打开直接跳到网页最下面、最低端实现代码

Apr 22 Javascript

浅谈jQuery异步对象（XMLHttpRequest）

Nov 17 Javascript

JS获取各种宽度、高度的简单介绍

Dec 19 Javascript

详解JavaScript函数

Dec 01 Javascript

基于jQuery插件实现点击小图显示大图效果

May 11 Javascript

JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

Aug 11 Javascript

js实现table添加行tr、删除行tr、清空行tr的简单实例

Oct 15 Javascript

jQuery实现隔行变色的方法分析(对比原生JS)

Nov 18 Javascript

js移动端图片压缩上传功能

Aug 18 Javascript

微信小程序实现图片上传、删除和预览功能的方法

Dec 18 Javascript

vue 中的动态传参和query传参操作

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