Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
845f4c43
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
845f4c43
编写于
10月 30, 2013
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* change file structure.
上级
a70124d6
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
908 addition
and
96 deletion
+908
-96
assets/css/zui.css
assets/css/zui.css
+786
-0
getting-started.md
getting-started.md
+1
-2
grid.html
grid.html
+62
-0
index.html
index.html
+5
-62
src/js/zui.js
src/js/zui.js
+0
-0
src/less/basic/grid.less
src/less/basic/grid.less
+6
-0
src/less/basic/mixins.less
src/less/basic/mixins.less
+8
-1
src/less/basic/scaffolding.less
src/less/basic/scaffolding.less
+4
-0
src/less/basic/variables.less
src/less/basic/variables.less
+23
-17
src/less/basic/zui.less
src/less/basic/zui.less
+0
-9
src/less/zui.less
src/less/zui.less
+13
-5
未找到文件。
assets/css/zui.css
0 → 100644
浏览文件 @
845f4c43
/**
* Zentao UI.
**/
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
main
,
nav
,
section
,
summary
{
display
:
block
;
}
audio
,
canvas
,
video
{
display
:
inline-block
;
}
audio
:not
([
controls
])
{
display
:
none
;
height
:
0
;
}
[
hidden
],
template
{
display
:
none
;
}
html
{
font-family
:
sans-serif
;
-ms-text-size-adjust
:
100%
;
-webkit-text-size-adjust
:
100%
;
}
body
{
margin
:
0
;
}
a
{
background
:
transparent
;
}
a
:focus
{
outline
:
thin
dotted
;
}
a
:active
,
a
:hover
{
outline
:
0
;
}
h1
{
font-size
:
2em
;
margin
:
0.67em
0
;
}
abbr
[
title
]
{
border-bottom
:
1px
dotted
;
}
b
,
strong
{
font-weight
:
bold
;
}
dfn
{
font-style
:
italic
;
}
hr
{
-moz-box-sizing
:
content-box
;
box-sizing
:
content-box
;
height
:
0
;
}
mark
{
background
:
#ff0
;
color
:
#000
;
}
code
,
kbd
,
pre
,
samp
{
font-family
:
monospace
,
serif
;
font-size
:
1em
;
}
pre
{
white-space
:
pre-wrap
;
}
q
{
quotes
:
"\201C"
"\201D"
"\2018"
"\2019"
;
}
small
{
font-size
:
80%
;
}
sub
,
sup
{
font-size
:
75%
;
line-height
:
0
;
position
:
relative
;
vertical-align
:
baseline
;
}
sup
{
top
:
-0.5em
;
}
sub
{
bottom
:
-0.25em
;
}
img
{
border
:
0
;
}
svg
:not
(
:root
)
{
overflow
:
hidden
;
}
figure
{
margin
:
0
;
}
fieldset
{
border
:
1px
solid
#c0c0c0
;
margin
:
0
2px
;
padding
:
0.35em
0.625em
0.75em
;
}
legend
{
border
:
0
;
padding
:
0
;
}
button
,
input
,
select
,
textarea
{
font-family
:
inherit
;
font-size
:
100%
;
margin
:
0
;
}
button
,
input
{
line-height
:
normal
;
}
button
,
select
{
text-transform
:
none
;
}
button
,
html
input
[
type
=
"button"
],
input
[
type
=
"reset"
],
input
[
type
=
"submit"
]
{
-webkit-appearance
:
button
;
cursor
:
pointer
;
}
button
[
disabled
],
html
input
[
disabled
]
{
cursor
:
default
;
}
input
[
type
=
"checkbox"
],
input
[
type
=
"radio"
]
{
box-sizing
:
border-box
;
padding
:
0
;
}
input
[
type
=
"search"
]
{
-webkit-appearance
:
textfield
;
-moz-box-sizing
:
content-box
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
;
}
input
[
type
=
"search"
]
::-webkit-search-cancel-button
,
input
[
type
=
"search"
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
;
}
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
border
:
0
;
padding
:
0
;
}
textarea
{
overflow
:
auto
;
vertical-align
:
top
;
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
;
}
*,
*
:before
,
*
:after
{
-webkit-box-sizing
:
border-box
;
-moz-box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
.container
{
margin-right
:
auto
;
margin-left
:
auto
;
padding-left
:
15px
;
padding-right
:
15px
;
}
.container
:before
,
.container
:after
{
content
:
" "
;
display
:
table
;
}
.container
:after
{
clear
:
both
;
}
.row
{
margin-left
:
-15px
;
margin-right
:
-15px
;
}
.row
:before
,
.row
:after
{
content
:
" "
;
display
:
table
;
}
.row
:after
{
clear
:
both
;
}
.col-xs-1
,
.col-xs-2
,
.col-xs-3
,
.col-xs-4
,
.col-xs-5
,
.col-xs-6
,
.col-xs-7
,
.col-xs-8
,
.col-xs-9
,
.col-xs-10
,
.col-xs-11
,
.col-xs-12
,
.col-sm-1
,
.col-sm-2
,
.col-sm-3
,
.col-sm-4
,
.col-sm-5
,
.col-sm-6
,
.col-sm-7
,
.col-sm-8
,
.col-sm-9
,
.col-sm-10
,
.col-sm-11
,
.col-sm-12
,
.col-md-1
,
.col-md-2
,
.col-md-3
,
.col-md-4
,
.col-md-5
,
.col-md-6
,
.col-md-7
,
.col-md-8
,
.col-md-9
,
.col-md-10
,
.col-md-11
,
.col-md-12
,
.col-lg-1
,
.col-lg-2
,
.col-lg-3
,
.col-lg-4
,
.col-lg-5
,
.col-lg-6
,
.col-lg-7
,
.col-lg-8
,
.col-lg-9
,
.col-lg-10
,
.col-lg-11
,
.col-lg-12
{
position
:
relative
;
min-height
:
1px
;
padding-left
:
15px
;
padding-right
:
15px
;
}
.col-xs-1
,
.col-xs-2
,
.col-xs-3
,
.col-xs-4
,
.col-xs-5
,
.col-xs-6
,
.col-xs-7
,
.col-xs-8
,
.col-xs-9
,
.col-xs-10
,
.col-xs-11
{
float
:
left
;
}
.col-xs-1
{
width
:
8.333333333333332%
;
}
.col-xs-2
{
width
:
16.666666666666664%
;
}
.col-xs-3
{
width
:
25%
;
}
.col-xs-4
{
width
:
33.33333333333333%
;
}
.col-xs-5
{
width
:
41.66666666666667%
;
}
.col-xs-6
{
width
:
50%
;
}
.col-xs-7
{
width
:
58.333333333333336%
;
}
.col-xs-8
{
width
:
66.66666666666666%
;
}
.col-xs-9
{
width
:
75%
;
}
.col-xs-10
{
width
:
83.33333333333334%
;
}
.col-xs-11
{
width
:
91.66666666666666%
;
}
.col-xs-12
{
width
:
100%
;
}
@media
(
min-width
:
768px
)
{
.container
{
max-width
:
750px
;
}
.col-sm-1
,
.col-sm-2
,
.col-sm-3
,
.col-sm-4
,
.col-sm-5
,
.col-sm-6
,
.col-sm-7
,
.col-sm-8
,
.col-sm-9
,
.col-sm-10
,
.col-sm-11
{
float
:
left
;
}
.col-sm-1
{
width
:
8.333333333333332%
;
}
.col-sm-2
{
width
:
16.666666666666664%
;
}
.col-sm-3
{
width
:
25%
;
}
.col-sm-4
{
width
:
33.33333333333333%
;
}
.col-sm-5
{
width
:
41.66666666666667%
;
}
.col-sm-6
{
width
:
50%
;
}
.col-sm-7
{
width
:
58.333333333333336%
;
}
.col-sm-8
{
width
:
66.66666666666666%
;
}
.col-sm-9
{
width
:
75%
;
}
.col-sm-10
{
width
:
83.33333333333334%
;
}
.col-sm-11
{
width
:
91.66666666666666%
;
}
.col-sm-12
{
width
:
100%
;
}
.col-sm-push-1
{
left
:
8.333333333333332%
;
}
.col-sm-push-2
{
left
:
16.666666666666664%
;
}
.col-sm-push-3
{
left
:
25%
;
}
.col-sm-push-4
{
left
:
33.33333333333333%
;
}
.col-sm-push-5
{
left
:
41.66666666666667%
;
}
.col-sm-push-6
{
left
:
50%
;
}
.col-sm-push-7
{
left
:
58.333333333333336%
;
}
.col-sm-push-8
{
left
:
66.66666666666666%
;
}
.col-sm-push-9
{
left
:
75%
;
}
.col-sm-push-10
{
left
:
83.33333333333334%
;
}
.col-sm-push-11
{
left
:
91.66666666666666%
;
}
.col-sm-pull-1
{
right
:
8.333333333333332%
;
}
.col-sm-pull-2
{
right
:
16.666666666666664%
;
}
.col-sm-pull-3
{
right
:
25%
;
}
.col-sm-pull-4
{
right
:
33.33333333333333%
;
}
.col-sm-pull-5
{
right
:
41.66666666666667%
;
}
.col-sm-pull-6
{
right
:
50%
;
}
.col-sm-pull-7
{
right
:
58.333333333333336%
;
}
.col-sm-pull-8
{
right
:
66.66666666666666%
;
}
.col-sm-pull-9
{
right
:
75%
;
}
.col-sm-pull-10
{
right
:
83.33333333333334%
;
}
.col-sm-pull-11
{
right
:
91.66666666666666%
;
}
.col-sm-offset-1
{
margin-left
:
8.333333333333332%
;
}
.col-sm-offset-2
{
margin-left
:
16.666666666666664%
;
}
.col-sm-offset-3
{
margin-left
:
25%
;
}
.col-sm-offset-4
{
margin-left
:
33.33333333333333%
;
}
.col-sm-offset-5
{
margin-left
:
41.66666666666667%
;
}
.col-sm-offset-6
{
margin-left
:
50%
;
}
.col-sm-offset-7
{
margin-left
:
58.333333333333336%
;
}
.col-sm-offset-8
{
margin-left
:
66.66666666666666%
;
}
.col-sm-offset-9
{
margin-left
:
75%
;
}
.col-sm-offset-10
{
margin-left
:
83.33333333333334%
;
}
.col-sm-offset-11
{
margin-left
:
91.66666666666666%
;
}
}
@media
(
min-width
:
992px
)
{
.container
{
max-width
:
970px
;
}
.col-md-1
,
.col-md-2
,
.col-md-3
,
.col-md-4
,
.col-md-5
,
.col-md-6
,
.col-md-7
,
.col-md-8
,
.col-md-9
,
.col-md-10
,
.col-md-11
{
float
:
left
;
}
.col-md-1
{
width
:
8.333333333333332%
;
}
.col-md-2
{
width
:
16.666666666666664%
;
}
.col-md-3
{
width
:
25%
;
}
.col-md-4
{
width
:
33.33333333333333%
;
}
.col-md-5
{
width
:
41.66666666666667%
;
}
.col-md-6
{
width
:
50%
;
}
.col-md-7
{
width
:
58.333333333333336%
;
}
.col-md-8
{
width
:
66.66666666666666%
;
}
.col-md-9
{
width
:
75%
;
}
.col-md-10
{
width
:
83.33333333333334%
;
}
.col-md-11
{
width
:
91.66666666666666%
;
}
.col-md-12
{
width
:
100%
;
}
.col-md-push-0
{
left
:
auto
;
}
.col-md-push-1
{
left
:
8.333333333333332%
;
}
.col-md-push-2
{
left
:
16.666666666666664%
;
}
.col-md-push-3
{
left
:
25%
;
}
.col-md-push-4
{
left
:
33.33333333333333%
;
}
.col-md-push-5
{
left
:
41.66666666666667%
;
}
.col-md-push-6
{
left
:
50%
;
}
.col-md-push-7
{
left
:
58.333333333333336%
;
}
.col-md-push-8
{
left
:
66.66666666666666%
;
}
.col-md-push-9
{
left
:
75%
;
}
.col-md-push-10
{
left
:
83.33333333333334%
;
}
.col-md-push-11
{
left
:
91.66666666666666%
;
}
.col-md-pull-0
{
right
:
auto
;
}
.col-md-pull-1
{
right
:
8.333333333333332%
;
}
.col-md-pull-2
{
right
:
16.666666666666664%
;
}
.col-md-pull-3
{
right
:
25%
;
}
.col-md-pull-4
{
right
:
33.33333333333333%
;
}
.col-md-pull-5
{
right
:
41.66666666666667%
;
}
.col-md-pull-6
{
right
:
50%
;
}
.col-md-pull-7
{
right
:
58.333333333333336%
;
}
.col-md-pull-8
{
right
:
66.66666666666666%
;
}
.col-md-pull-9
{
right
:
75%
;
}
.col-md-pull-10
{
right
:
83.33333333333334%
;
}
.col-md-pull-11
{
right
:
91.66666666666666%
;
}
.col-md-offset-0
{
margin-left
:
0
;
}
.col-md-offset-1
{
margin-left
:
8.333333333333332%
;
}
.col-md-offset-2
{
margin-left
:
16.666666666666664%
;
}
.col-md-offset-3
{
margin-left
:
25%
;
}
.col-md-offset-4
{
margin-left
:
33.33333333333333%
;
}
.col-md-offset-5
{
margin-left
:
41.66666666666667%
;
}
.col-md-offset-6
{
margin-left
:
50%
;
}
.col-md-offset-7
{
margin-left
:
58.333333333333336%
;
}
.col-md-offset-8
{
margin-left
:
66.66666666666666%
;
}
.col-md-offset-9
{
margin-left
:
75%
;
}
.col-md-offset-10
{
margin-left
:
83.33333333333334%
;
}
.col-md-offset-11
{
margin-left
:
91.66666666666666%
;
}
}
@media
(
min-width
:
1200px
)
{
.container
{
max-width
:
1170px
;
}
.col-lg-1
,
.col-lg-2
,
.col-lg-3
,
.col-lg-4
,
.col-lg-5
,
.col-lg-6
,
.col-lg-7
,
.col-lg-8
,
.col-lg-9
,
.col-lg-10
,
.col-lg-11
{
float
:
left
;
}
.col-lg-1
{
width
:
8.333333333333332%
;
}
.col-lg-2
{
width
:
16.666666666666664%
;
}
.col-lg-3
{
width
:
25%
;
}
.col-lg-4
{
width
:
33.33333333333333%
;
}
.col-lg-5
{
width
:
41.66666666666667%
;
}
.col-lg-6
{
width
:
50%
;
}
.col-lg-7
{
width
:
58.333333333333336%
;
}
.col-lg-8
{
width
:
66.66666666666666%
;
}
.col-lg-9
{
width
:
75%
;
}
.col-lg-10
{
width
:
83.33333333333334%
;
}
.col-lg-11
{
width
:
91.66666666666666%
;
}
.col-lg-12
{
width
:
100%
;
}
.col-lg-push-0
{
left
:
auto
;
}
.col-lg-push-1
{
left
:
8.333333333333332%
;
}
.col-lg-push-2
{
left
:
16.666666666666664%
;
}
.col-lg-push-3
{
left
:
25%
;
}
.col-lg-push-4
{
left
:
33.33333333333333%
;
}
.col-lg-push-5
{
left
:
41.66666666666667%
;
}
.col-lg-push-6
{
left
:
50%
;
}
.col-lg-push-7
{
left
:
58.333333333333336%
;
}
.col-lg-push-8
{
left
:
66.66666666666666%
;
}
.col-lg-push-9
{
left
:
75%
;
}
.col-lg-push-10
{
left
:
83.33333333333334%
;
}
.col-lg-push-11
{
left
:
91.66666666666666%
;
}
.col-lg-pull-0
{
right
:
auto
;
}
.col-lg-pull-1
{
right
:
8.333333333333332%
;
}
.col-lg-pull-2
{
right
:
16.666666666666664%
;
}
.col-lg-pull-3
{
right
:
25%
;
}
.col-lg-pull-4
{
right
:
33.33333333333333%
;
}
.col-lg-pull-5
{
right
:
41.66666666666667%
;
}
.col-lg-pull-6
{
right
:
50%
;
}
.col-lg-pull-7
{
right
:
58.333333333333336%
;
}
.col-lg-pull-8
{
right
:
66.66666666666666%
;
}
.col-lg-pull-9
{
right
:
75%
;
}
.col-lg-pull-10
{
right
:
83.33333333333334%
;
}
.col-lg-pull-11
{
right
:
91.66666666666666%
;
}
.col-lg-offset-0
{
margin-left
:
0
;
}
.col-lg-offset-1
{
margin-left
:
8.333333333333332%
;
}
.col-lg-offset-2
{
margin-left
:
16.666666666666664%
;
}
.col-lg-offset-3
{
margin-left
:
25%
;
}
.col-lg-offset-4
{
margin-left
:
33.33333333333333%
;
}
.col-lg-offset-5
{
margin-left
:
41.66666666666667%
;
}
.col-lg-offset-6
{
margin-left
:
50%
;
}
.col-lg-offset-7
{
margin-left
:
58.333333333333336%
;
}
.col-lg-offset-8
{
margin-left
:
66.66666666666666%
;
}
.col-lg-offset-9
{
margin-left
:
75%
;
}
.col-lg-offset-10
{
margin-left
:
83.33333333333334%
;
}
.col-lg-offset-11
{
margin-left
:
91.66666666666666%
;
}
}
getting-started.md
浏览文件 @
845f4c43
...
...
@@ -115,7 +115,7 @@ ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐
## 6 配色 ##
ZUI的界面应该简洁,易于识别,让人感觉舒适而不失严谨。
ZUI
的配色应该尽可能达到该目的。
ZUI的界面应该简洁,易于识别,让人感觉舒适而不失严谨。
所使用
的配色应该尽可能达到该目的。
ZUI的配色表包含三部分:
...
...
@@ -129,6 +129,5 @@ ZUI的配色表包含三部分:
-
在界面中运用的所有配色尽量使用配色表中已列明的颜色;
-
优先使用主要颜色和灰度颜色,仅在特殊的按钮或消息时才使用额外颜色;
-
下面是ZUI默认使用的配色方案--静谧之湖。
\ No newline at end of file
grid.html
0 → 100644
浏览文件 @
845f4c43
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
ZUI
</title>
<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>
<style>
.row
{
margin-bottom
:
20px
;
}
.row
.row
{
margin-top
:
10px
;
margin-bottom
:
0
;
}
[
class
*=
"col-"
]
{
padding-top
:
15px
;
padding-bottom
:
15px
;
background-color
:
#eee
;
border
:
1px
solid
#ddd
;
background-color
:
rgba
(
86
,
61
,
124
,
.15
);
border
:
1px
solid
rgba
(
86
,
61
,
124
,
.2
);
}
</style>
<div
class=
'container'
>
<div
class=
"row"
>
<div
class=
"col-md-8"
>
.col-md-8
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-4"
>
.col-md-4
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-6"
>
.col-md-6
</div>
<div
class=
"col-md-6"
>
.col-md-6
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xs-12 col-sm-6 col-md-8"
>
.col-xs-12 .col-sm-6 .col-md-8
</div>
<div
class=
"col-xs-6 col-md-4"
>
.col-xs-6 .col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div
class=
"clearfix visible-xs"
></div>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-9 col-md-push-3"
>
.col-md-9 .col-md-push-3
</div>
<div
class=
"col-md-3 col-md-pull-9"
>
.col-md-3 .col-md-pull-9
</div>
</div>
</div>
</body>
</html>
index.html
浏览文件 @
845f4c43
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
ZUI
</title>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"src/less/basic/zui.less"
/>
<script
type=
"text/javascript"
>
less
=
{
env
:
"
development
"
,
dumpLineNumbers
:
'
mediaquery
'
};
</script>
<script
type=
"text/javascript"
src=
"assets/js/less.js"
></script>
</head>
<body>
<style>
.row
{
margin-bottom
:
20px
;
}
.row
.row
{
margin-top
:
10px
;
margin-bottom
:
0
;
}
[
class
*=
"col-"
]
{
padding-top
:
15px
;
padding-bottom
:
15px
;
background-color
:
#eee
;
border
:
1px
solid
#ddd
;
background-color
:
rgba
(
86
,
61
,
124
,
.15
);
border
:
1px
solid
rgba
(
86
,
61
,
124
,
.2
);
}
</style>
<div
class=
'container'
>
<div
class=
"row"
>
<div
class=
"col-md-8"
>
.col-md-8
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-4"
>
.col-md-4
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
<div
class=
"col-md-4"
>
.col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-6"
>
.col-md-6
</div>
<div
class=
"col-md-6"
>
.col-md-6
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xs-12 col-sm-6 col-md-8"
>
.col-xs-12 .col-sm-6 .col-md-8
</div>
<div
class=
"col-xs-6 col-md-4"
>
.col-xs-6 .col-md-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div
class=
"clearfix visible-xs"
></div>
<div
class=
"col-xs-6 col-sm-4"
>
.col-xs-6 .col-sm-4
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-9 col-md-push-3"
>
.col-md-9 .col-md-push-3
</div>
<div
class=
"col-md-3 col-md-pull-9"
>
.col-md-3 .col-md-pull-9
</div>
</div>
</div>
</body>
</html>
---
layout: default
title: ZUI
base_url: "./"
---
src/zui.js
→
src/
js/
zui.js
浏览文件 @
845f4c43
文件已移动
src/less/basic/grid.less
浏览文件 @
845f4c43
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container { .container-fixed(); }
// mobile first defaults
...
...
src/less/basic/mixins.less
浏览文件 @
845f4c43
//
// Mixins
// ==================================================
.clearfix()
{
&:before, &:after { content: " "; display: table; }
...
...
@@ -12,7 +17,9 @@
box-sizing: @boxmodel;
}
/* Grid System */
//
// BASIC VARIABLES & MIXINS
// --------------------------------------------------
// Centered container element
.container-fixed()
...
...
src/less/basic/scaffolding.less
浏览文件 @
845f4c43
//
// Scaffolding
// --------------------------------------------------
*, *:before, *:after { .box-sizing(border-box); }
src/less/basic/variables.less
浏览文件 @
845f4c43
/
**
*
The Variables of ZUI.
**/
/
/
//
The Variables of ZUI.
// =================================================
/*--------------- MEDIA QUERIES TYPES -------------*/
//
// MEDIA QUERIES TYPES
// -------------------------------------------------
/
* Extra small screen (phone). */
/
/ Extra small screen (phone).
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
/
* Small screen (tablet). */
/
/ Small screen (tablet).
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
/
* Medium screen (desktop). */
/
/ Medium screen (desktop).
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
/
* Large screen (wide desktop). */
/
/ Large screen (wide desktop).
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
/
* Provide max value for different screens. */
/
/ Provide max value for different screens.
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
/*----------------- Grid System ---------------*/
//
// Grid System
// -------------------------------------------------
/
* Number of grid columns. */
/
/ Number of grid columns.
@grid-columns: 12;
/
* Padding applied on all columns at left and right. */
/
/ Padding applied on all columns at left and right.
@grid-gutter-width: 30px;
@grid-float-breakpoint: @screen-tablet;
...
...
@@ -48,15 +52,17 @@
@container-lg-desktop: ((1140px + @grid-gutter-width));
/*----------------- Typography ---------------*/
//
// Typography
// -------------------------------------------------
/
* Font family. */
/
/ Font family.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
/
* Font size. */
/
/ Font size.
@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.25); // 18px
@font-size-small: ceil(@font-size-base * 0.85); // 12px
...
...
@@ -68,11 +74,11 @@
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // 12px
/
* Line height. */
/
/ Line height.
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // 20px
/
* Headings font. */
/
/ Headings font.
@headings-font-family: @font-family-base;
@headings-font-weight: bold;
@headings-line-height: 1.2;
...
...
src/less/basic/zui.less
已删除
100644 → 0
浏览文件 @
a70124d6
// config and mixins
@import "variables.less";
@import "mixins.less";
@import "normalize.less";
// basic
@import "scaffolding.less";
@import "grid.less";
src/less/zui.less
浏览文件 @
845f4c43
/**
*
The Variables of Z
UI.
*
Zentao
UI.
**/
/*------------ BASIC VARIABLES & MIXINS ----------*/
//
// BASIC VARIABLES & MIXINS
// --------------------------------------------------
/
* Variables */
/
/ Variables
@import "basic/variables.less";
/* Reset */
// Mixins
@import "basic/mixins.less";
// Reset
@import "basic/normalize.less";
/* Grid system. */
// Scaffolding
@import "basic/scaffolding.less";
// Grid system
@import "basic/grid.less";
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录