bootstrap3的 progress 进度条
2013-11-25 11:05
357 查看
1、被修改的两个标签词:
2.3版 3.0版
2、代码:
3、相对应的效果图:
2.3版 3.0版
.bar | .progress-bar |
.bar-* | .progress-bar-* |
<!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、相对应的效果图:
相关文章推荐
- bootstrap3的 progress 进度条
- bootstrap3的 progress 进度条
- Jquery Easyui进度条组件Progress使用详解(8)
- Jquery Easyui进度条组件Progress使用详解(8)
- UIProgressView进度条
- iOS 使用NJKWebViewProgress做webview进度条
- 深入理解BootStrap -- 进度条(progressbar)14
- BootStrap 进度条
- ProgressWheelDialogUtil【ProgressWheel Material样式进度条对话框】
- 提示框进度条第三方库之MBProgressHUD
- Bootstrap 进度条代码
- NProgress.js一款炫酷的网页加载进度显示插件
- Bootstrap 中 各种组件----巨幕页头缩略图和警告框组件,进度条媒体对象和Well组件(八)
- AndroidAnnotations——Publish progress显示进度
- 进度条. SAPGUI_PROGRESS_INDICATOR
- 实现微信和QQ图片加载显示进度的效果-LoadingProgress
- NSProgressIndicator 进度没有响应!
- 更新LisView里面的进度条----Progress进度条
- 显示进度条SysOperationProgress
- UIWebView 加载进度控件 NJKWebViewProgress的使用