Ant Design Pro 入门学习笔记

1.目录结构

2.开发流程示意图

菜单配置文件ant-design-pro\src\layouts\BasicLayout.js

路由配置文件ant-design-pro\src\pages\.umi\router.js

 

ant.design的栅格系统

　　在 ant.design 中，对于栅格系统的设计和bootstrap中的设计是极其类似的，核心概念为： Row一定是最外层的， Col一定是分布在Row中的， 内容一定是在Col里的， 当然，在Col中我们还可以嵌套Row，在antd中， Col被分成了24分（与bootstrap的12份是类似的）。 

　　在Col中，我们可以使用span={number}来制定一个Col的宽度，具体的做法是使用 百分比 来划分， 如 span={4} 的占满，那么每一份就是 16.6667% , 如果 span={12} 占满，那么每一份就是 50%。。。。 依次类推。 

　　另外，在Col中我们还可以使用offset来进行便宜，正值为向右偏移，使用的原理是 margin-left 或者是 margin-right。 

　　我们还可以在Row中设置 gutter={number } 这个值就是栅格的间距，具体实现原理就是对div根据百分比来划分，然后在div内容使用padding，这时content肯定是减小的。 

　    除此之外，还可以在 Col 中设置 push={number} 以及 pull={number}，实现原理也非常简单，就是使用元素的 position: relative；值，通过 left=百分比;以及right=百分比； 这样就可以实现pull 和 push 就可以了。 

　　

　　当然，我们还可以使用 Row 的flex进行布局，这种布局方式只需要在 Row 上设置 type="flex"，就可以设置竖直和水平对齐方式了。 

　　竖直对齐方式：

• align="top" 向上对齐
• align="middle" 中间对齐
• alegn="bottom" 向下对齐

　　水平对其方式：

• justify="start" 左对齐
• justify='end' 右对齐
• justify="center" 中间对齐
• justify='space-between' 中间
• jusify="space-around" 中间

　　

　　这些flex布局的原理也很简单，就是直接使用css3的flex， 如align-items以及 justify-content。   

 　　

　　另外， ant.design也是支持响应式布局的 。 和bootstrap一样。

 

 

　　注意点：

• 一般在我们制作表格的时候，可以使用 ant.design 的栅格系统，比如，左边是说明性文字，右边是选择项或者是input框。 整体使用flex布局即可。 左边的给一个固定的宽度，如span={4}，右边的就是span={24}了， 并且在右边，如果是input框就比较好解决，如果是几个框，我们需要分开排列，就需要使用一个 <Row>，然后设置flex，其中justify应该是space-between，而能是start、end、center或者是 space-around。 因为对于 start、end、center，会使得几个框都会贴的很紧（除非是我们在其中再添加一个div，然后添加一个padding，这样才能做到分割)，那么space-between和space-around的区别是什么？前者是两边贴近然后中间有空位置，而后者是两边的距离为中间padding的一般。