bootstrap组件---进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% 完成(成功)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% 完成(信息)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% 完成(警告)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% 完成(危险)</span>
</div>
</div>
role:语义化属性,无显示上的效果
aria-valuenow
aria-valuemin
aria-valuemax
3个属性无显示上的效果,标识进度值范围和当前进度值,可以用于js设置和获取进度:
object.setAttribute("aria-valuenow",value);
var value = object.getAttribute("aria-valuenow");
style="width: 90%;"
定义进度条宽度
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
4个class定义不同进度下的进度条颜色显示,比如danger时显示红色警醒
bootstrap组件---进度条的更多相关文章
- Bootstrap(10) 进度条媒体对象和 Well 组件
一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...
- Bootstrap 各种进度条详解
一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...
- Bootstrap各种进度条的实例讲解
本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...
- Bootstrap学习 进度条
本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...
- 高级组件——进度条 JProgressBar
JProgressBar pro=new JProgressBar(); pro.setIndeterminate(boolean); 设置不确定性 false,确定的进度条(显示进度, ...
- vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因
自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...
- BackgroundWorker 组件 -- 进度条
代码: BackgroundWorker bw = new BackgroundWorker(); public MainWindow() { InitializeComponent(); bw.Wo ...
- bootstrap.css 进度条没有动画效果
操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选
- Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
随机推荐
- Python中的open()方法总结
总结Python中的open()方法 message= {'企业即时通信': 'aaa', '企业名称': 'bbb'} with open("..\\r.txt", " ...
- OGG bi-directional replication for Oracle DB
Overview of an Active-Active Configuration Oracle GoldenGate supports an active-active bi-directiona ...
- Java语法进阶16-Lambda-Stream-Optional
Lambda 大年初二,大门不出二门不迈.继续学习! 函数式接口 Lambda表达式其实就是实现SAM接口的语法糖,所谓SAM接口就是Single Abstract Method,即该接口中只有一个抽 ...
- PSP第一次总结
项目计划总结 周活动总结表 姓名:王金萱 ...
- 【javaWeb】sendRedirect和forward原理及区别总结
一.原理. 1. Forward 该图的交互过程如下: ① 浏览器访问Servlet1. ② Servlet1想让Servlet2对客户端的请求进行响应,于是调用forward()方法 ...
- Dynamics CRM 快速获取custom entity
我们可以使用Command来实现快速获取custom entity的值. 创建cmd 并且在nuget中引用 CRMSDK 复制下面的代码. userName 为登陆CRM的email passwo ...
- Docker三剑客之Machine
前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...
- 1222: 计算x^1+x^2+x^3+……+x^n的值
#include <stdio.h>int main(){ int x,n,i,j; long long sum,g;while(scanf("%d%d",&x ...
- 为什么Netflix没有运维岗位?
Netflix 是业界微服务架构的最佳实践者,其基于公有云上的微服务架构设计.持续交付.监控.稳定性保障,都为业界提供了大量可遵从的原则和实践经验. 在运维这个细分领域,Netflix 仍然是最佳实践 ...
- 练习2-15 求简单交错序列前N项和 (15 分)
练习2-15 求简单交错序列前N项和 (15 分) 本题要求编写程序,计算序列 1 - 1/4 + 1/7 - 1/10 + ... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格 ...