bootstrap3的 progress 进度条

：

2.3版 3.0版

`.bar`	`.progress-bar`
`.bar-*`	`.progress-bar-*`

2、代码：

[html] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>
<body style="margin:200px;">
<span>普通的进度条</span>
<div class="progress">
<div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<span>炫动进度条加active（不支持各个IE版本）</span>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</body>
</html>

3、相对应的效果图：

转载于:https://www.cnblogs.com/telwanggs/p/7101718.html

bootstrap3的 progress 进度条相关推荐

微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
elementui进度条如何设置_ElementUI之Progress进度条底色设置
ElementUI中Progress进度条组件官网给了如下属性: 这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好).但是官网并没有给出设置底色的属性,只给了一个默认的颜色,F1 ...
直播平台搭建源码，uniapp progress进度条
直播平台搭建源码,uniapp progress进度条 .progress-container {height: 20rpx;display: flex;flex-direction: row;ali ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
更多文章请查看 flutter从入门到精通 Flutter Progress 1 条形无固定值进度条 //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox ...
微信小程序进度条样式_微信小程序—progress(进度条)
设置进度条颜色(请使用十六进制颜色值,例如:#ff00ff) 未选择的进度条的颜色(请使用十六进制颜色值,例如:#ff00ff) 设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比 //获 ...

bootstrap3的 progress 进度条

bootstrap3的 progress 进度条相关推荐

最新文章

热门文章