Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
240efbb4
Z
zui
项目概览
易企天创
/
zui
11 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
240efbb4
编写于
10月 31, 2013
作者:
A
azhi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* finish task#1721.
* add progress-bar.
上级
1f3229d1
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
306 addition
and
3 deletion
+306
-3
controls.html
controls.html
+87
-1
examples/progress.html
examples/progress.html
+99
-0
src/less/basic/scaffolding.less
src/less/basic/scaffolding.less
+14
-0
src/less/basic/variables.less
src/less/basic/variables.less
+12
-1
src/less/controls/progress-bars.less
src/less/controls/progress-bars.less
+92
-0
src/less/zui.less
src/less/zui.less
+2
-1
未找到文件。
controls.html
浏览文件 @
240efbb4
...
...
@@ -244,4 +244,90 @@ base_url: "./"
<td>
备用的暗灰色按钮,不依赖于语义和用途
</td>
</tr>
</table>
</section>
\ No newline at end of file
</section>
<section
id=
'progressBars'
class=
"page-section"
>
<div
class=
"page-header"
><h1
id=
"progress"
>
进度条
</h1></div>
<p
class=
"lead"
>
提供工作或动作的实时反馈,只用简单且灵活的进度条。
</p>
<div
class=
"bs-callout bs-callout-danger"
>
<h4>
跨浏览器兼容性
</h4>
<p>
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
</p>
</div>
<h3
id=
"progress-basic"
>
基本案例
</h3>
<p>
默认的进度条。
</p>
<div
class=
"progress"
>
<div
class=
"progress-bar"
role=
"progressbar"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 60%;"
>
<span
class=
"sr-only"
>
60% Complete
</span>
</div>
</div>
<h3
id=
"progress-alternatives"
>
有意义的替换
</h3>
<p>
为了一致的样式,进度条使用与按钮和警告框相同的类。
</p>
<div
class=
"progress"
>
<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"
>
<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"
>
<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"
>
<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>
<h3
id=
"progress-striped"
>
条纹效果
</h3>
<p>
用一个渐变可以创建条纹效果,在IE8中不可用。
</p>
<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>
<h3
id=
"progress-animated"
>
运动效果
</h3>
<p>
给
<code>
.progress-striped
</code>
加上
<code>
.active
</code>
使它由右向左运动。在IE的所有版本不可用。
</p>
<div
class=
"progress progress-striped active"
>
<div
class=
"progress-bar progress-bar-info"
role=
"progressbar"
aria-valuenow=
"45"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 45%"
>
<span
class=
"sr-only"
>
45% Complete
</span>
</div>
</div>
<h3
id=
"progress-stacked"
>
堆叠效果
</h3>
<p>
把多个进度条放入同一个
<code>
.progress
</code>
,使它们堆叠。
</p>
<div
class=
"progress"
>
<div
class=
"progress-bar progress-bar-success"
style=
"width: 35%"
>
<span
class=
"sr-only"
>
35% Complete (success)
</span>
</div>
<div
class=
"progress-bar progress-bar-warning"
style=
"width: 20%"
>
<span
class=
"sr-only"
>
20% Complete (warning)
</span>
</div>
<div
class=
"progress-bar progress-bar-danger"
style=
"width: 10%"
>
<span
class=
"sr-only"
>
10% Complete (danger)
</span>
</div>
</div>
</section>
examples/progress.html
0 → 100644
浏览文件 @
240efbb4
<html>
<head>
<meta
charset=
'utf8'
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"src/less/zui.less"
/>
<script
type=
"text/javascript"
>
less
=
{
env
:
"
development
"
,
dumpLineNumbers
:
'
mediaquery
'
};
</script>
<script
type=
"text/javascript"
src=
"assets/js/less.js"
></script>
</head>
<body>
<section
id=
'progressBars'
class=
"page-section"
>
<div
class=
"page-header"
><h1
id=
"progress"
>
进度条
</h1></div>
<p
class=
"lead"
>
提供工作或动作的实时反馈,只用简单且灵活的进度条。
</p>
<div
class=
"bs-callout bs-callout-danger"
>
<h4>
跨浏览器兼容性
</h4>
<p>
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
</p>
</div>
<h3
id=
"progress-basic"
>
基本案例
</h3>
<p>
默认的进度条。
</p>
<div
class=
"progress"
>
<div
class=
"progress-bar"
role=
"progressbar"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 60%;"
>
<span
class=
"sr-only"
>
60% Complete
</span>
</div>
</div>
<h3
id=
"progress-alternatives"
>
有意义的替换
</h3>
<p>
为了一致的样式,进度条使用与按钮和警告框相同的类。
</p>
<div
class=
"progress"
>
<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"
>
<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"
>
<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"
>
<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>
<h3
id=
"progress-striped"
>
条纹效果
</h3>
<p>
用一个渐变可以创建条纹效果,在IE8中不可用。
</p>
<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>
<h3
id=
"progress-animated"
>
运动效果
</h3>
<p>
给
<code>
.progress-striped
</code>
加上
<code>
.active
</code>
使它由右向左运动。在IE的所有版本不可用。
</p>
<div
class=
"progress progress-striped active"
>
<div
class=
"progress-bar progress-bar-info"
role=
"progressbar"
aria-valuenow=
"45"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 45%"
>
<span
class=
"sr-only"
>
45% Complete
</span>
</div>
</div>
<h3
id=
"progress-stacked"
>
堆叠效果
</h3>
<p>
把多个进度条放入同一个
<code>
.progress
</code>
,使它们堆叠。
</p>
<div
class=
"progress"
>
<div
class=
"progress-bar progress-bar-success"
style=
"width: 35%"
>
<span
class=
"sr-only"
>
35% Complete (success)
</span>
</div>
<div
class=
"progress-bar progress-bar-warning"
style=
"width: 20%"
>
<span
class=
"sr-only"
>
20% Complete (warning)
</span>
</div>
<div
class=
"progress-bar progress-bar-danger"
style=
"width: 10%"
>
<span
class=
"sr-only"
>
10% Complete (danger)
</span>
</div>
</div>
</section>
</body>
</html>
src/less/basic/scaffolding.less
浏览文件 @
240efbb4
...
...
@@ -3,3 +3,17 @@
// --------------------------------------------------
*, *:before, *:after { .box-sizing(border-box); }
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
src/less/basic/variables.less
浏览文件 @
240efbb4
...
...
@@ -183,4 +183,15 @@
@btn-info-bg: @color-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: @gray-light;
\ No newline at end of file
@btn-link-disabled-color: @gray-light;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-color: #fff;
@progress-bar-bg: @color-primary;
@progress-bar-success-bg: @color-success;
@progress-bar-warning-bg: @color-warning;
@progress-bar-danger-bg: @color-danger;
@progress-bar-info-bg: @color-info;
src/less/controls/progress-bars.less
0 → 100644
浏览文件 @
240efbb4
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// Webkit
@-webkit-keyframes progress-bar-stripes
{
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Firefox
@-moz-keyframes progress-bar-stripes
{
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes
{
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec and IE10+
@keyframes progress-bar-stripes
{
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Bar itself
// -------------------------
// Outer container
.progress
{
overflow: hidden;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress-bar
{
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease);
}
// Striped bars
.progress-striped .progress-bar
{
#gradient > .striped(@progress-bar-bg);
background-size: 40px 40px;
}
// Call animation for the active one
.progress.active .progress-bar
{
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
// Variations
// -------------------------
.progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-variant(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-variant(@progress-bar-danger-bg); }
src/less/zui.less
浏览文件 @
240efbb4
...
...
@@ -26,4 +26,5 @@
// CONTROLS
// --------------------------------------------------
@import "controls/buttons.less";
\ No newline at end of file
@import "controls/buttons.less";
@import "controls/progress-bars.less";
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录