Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
63025753
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
63025753
编写于
6月 09, 2015
作者:
然
然则
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of github.com:ant-design/ant-design
上级
34e0fa4b
a5cb458b
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
162 addition
and
6 deletion
+162
-6
components/layout/demo/basic.md
components/layout/demo/basic.md
+17
-4
components/layout/demo/offset.md
components/layout/demo/offset.md
+24
-0
components/layout/demo/sort.md
components/layout/demo/sort.md
+17
-0
components/layout/index.md
components/layout/index.md
+104
-2
未找到文件。
components/layout/demo/basic.md
浏览文件 @
63025753
...
...
@@ -2,15 +2,28 @@
-
order: 1
24栏栅格化布局
从堆叠到水平排列
使用单一的一组
`.col-*`
栅格类,就可以创建一个基本的栅格系统,所有列(column)必须放在
`.row`
内
---
````
html
<div
class=
"row"
>
<div
class=
"col-1"
>
1
</div>
<div
class=
"col-2"
>
2
</div>
<div
class=
"col-3"
>
3
</div>
<div
class=
"col-16"
>
.col-16
</div>
<div
class=
"col-8"
>
.col-8
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-8"
>
.col-8
</div>
<div
class=
"col-8"
>
.col-8
</div>
<div
class=
"col-8"
>
.col-8
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-12"
>
.col-12
</div>
<div
class=
"col-12"
>
.col-12
</div>
</div>
````
components/layout/demo/offset.md
0 → 100644
浏览文件 @
63025753
# Offset Column
-
order: 2
列偏移
使用
`.col-offset-*`
类可以将列向右侧偏。例如,
`.col-offset-4`
类将
`.col-md-4`
元素向右侧偏移了4个列(column)的宽度。
---
````
html
<div
class=
"row"
>
<div
class=
"col-8"
>
.col-8
</div>
<div
class=
"col-8 col-offset-8"
>
.col-8 .col-offset-8
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-6 col-offset-6"
>
.col-6 .col-offset-6
</div>
<div
class=
"col-6 col-offset-6"
>
.col-6 .col-offset-6
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-12 col-offset-6"
>
.col-12 .col-offset-6
</div>
</div>
````
components/layout/demo/sort.md
0 → 100644
浏览文件 @
63025753
# Sort Column
-
order: 3
列排序
通过使用
`.col-push-*`
和
`.col-pull-*`
类就可以很容易的改变列(column)的顺序。
---
````
html
<div
class=
"row"
>
<div
class=
"col-18 col-push-6"
>
.col-18 .col-push-6
</div>
<div
class=
"col-6 col-pull-18"
>
.col-6 .col-pull-18
</div>
</div>
````
components/layout/index.md
浏览文件 @
63025753
...
...
@@ -6,8 +6,110 @@
---
##
布局规范
##
设计理念
我们将整个设计区域划分为24等分,划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多4个,最少1个。
<div
class=
"row demo-row"
>
<div
class=
"col-24 demo-col demo-col-1"
>
100%
</div>
</div>
<div
class=
"row demo-row"
>
<div
class=
"col-6 demo-col demo-col-2"
>
25%
</div>
<div
class=
"col-6 demo-col demo-col-3"
>
25%
</div>
<div
class=
"col-6 demo-col demo-col-2"
>
25%
</div>
<div
class=
"col-6 demo-col demo-col-3"
>
25%
</div>
</div>
<div
class=
"row demo-row"
>
<div
class=
"col-8 demo-col demo-col-4"
>
33.
33%
</div>
<div
class=
"col-8 demo-col demo-col-5"
>
33.
33%
</div>
<div
class=
"col-8 demo-col demo-col-4"
>
33.
33%
</div>
</div>
<div
class=
"row demo-row"
>
<div
class=
"col-12 demo-col demo-col-1"
>
50%
</div>
<div
class=
"col-12 demo-col demo-col-3"
>
50%
</div>
</div>
<div
class=
"row demo-row"
>
<div
class=
"col-16 demo-col demo-col-4"
>
66.
66%
</div>
<div
class=
"col-8 demo-col demo-col-5"
>
33.
33%
</div>
</div>
考虑到Ant Design面临的业务多数的情况下需要在设计区域内解决大量信息收纳的问题,因此在12栅格系统的基础上,我们将整个设计区域建议按照24等分的原则划分。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多4个,最少1个。“盒子”在整个屏幕上占比见上图。设计部分急于盒子的单位定制盒子内部的排版规则以保证在视觉层面的舒适感。
## 概述
布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:
*
通过
`row`
在水平方向建立一组
`column`
(简写col)
*
你的内容应当放置于
`col`
内,并且,只有
`col`
可以作为
`row`
的直接元素
*
栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽d的列可以使用
`.col-8`
来创建
*
如果一个
`row`
中的
`col`
总和超过24,那么多余的
`col`
会作为一个整体另起一行排列
<style>
.row {
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.row div {
padding: 5px 0;
background: rgba(24, 115, 216, 0.7);
text-align: center;
min-height: 28px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 10px;
color: #fff;
}
.row .demo-col {
text-align: center;
padding: 40px 0;
color: #fff;
font-size: 18px;
border: none;
margin-top: 0;
margin-bottom: 0;
}
.row .demo-col-1 {
background: rgba(24, 115, 216, 0.7);
}
.row .demo-col-2 {
background: rgba(24, 115, 216, 0.5);
}
.row .demo-col-3 {
background: rgba(255, 255, 255, 0.2);
color: #999;
}
.row .demo-col-4 {
background: rgba(24, 115, 216, 0.6);
}
.row .demo-col-5 {
background: rgba(255, 255, 255, 0.5);
color: #999;
}
</style>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录