bootstrap3的 progress 进度条
：
2.3版 3.0版
.bar |
.progress-bar |
.bar-* |
.progress-bar-* |
2、代码：
- <!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 进度条的更多相关文章
- 微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序 progress 进度条 内部圆角及内部条渐变色
微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...
- Bootstrap3.0（进度条、媒体对象、列表组、面板）
Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...
- android中progress进度条的使用
activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- progress 进度条
进度条. 属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...
- progress进度条的样式修改
由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...
- [Cocos2d-x For WP8]Progress 进度条
Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...
- 使用div实现progress进度条
在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*) 可以在CSS里改样式,可以JS里改进度. <div cla ...
- html。PROGRESS进度条使用测试
效果图 : 代码: ----------------------------------- //本文来自:https://www.cnblogs.com/java2sap/p/11199126.htm ...
随机推荐
- node对称加密（转载）
https://www.cnblogs.com/laogai/p/4664917.html
- 字符串函数（day11）
使用存储区的地址作为返回值可以让调用 函数使用被调用函数的存储区 这种时候被调用函数需要提供一个指针类型 的存储区记录作为返回值的地址数据 不可以把非静态局部变量的地址作为返回值 使用 C语言里的文字 ...
- 重装系统后导入raid
参考 https://ubuntuforums.org/showthread.php?t=2002217 https://www.funkypenguin.co.nz/note/importing-e ...
- Python学习笔记之函数
这篇文章介绍有关 Python 函数中一些常被大家忽略的知识点,帮助大家更全面的掌握 Python 中函数的使用技巧 1.函数文档 给函数添加注释,可以在 def 语句后面添加独立字符串,这样的注释被 ...
- Yii2验证码使用教程
控制器代码 public function actions() { return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaActio ...
- hashlib模块 简单了解
import hashlib '''不可逆加密''' password = 'wwwwww7777'.encode('utf8') word = hashlib.md5(password) # md5 ...
- hdu 4612 双联通缩点+树形dp
#pragma comment(linker,"/STACK:102400000,102400000")//总是爆栈加上这个就么么哒了 #include<stdio.h> ...
- 使用 Redis及其产品定位
实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加,和访问量的持续增长,我们遇到了很多问题: ...
- Spring boot 前后台分离项目 怎么处理spring security 抛出的异常
最近在开发一个项目 前后台分离的 使用 spring boot + spring security + jwt 实现用户登录权限控制等操作.但是 在用户登录的时候,怎么处理spring securi ...
- Java中最小的整数为什么是-2147483648
Java中最小的整数为什么是-2147483648 假如只有两位来表示数字,第一位是符号位: 00:0 01:1 11:-1,这个是负数,而且是补码,取反为00,加1成为01,就是-1 10:-2,这 ...