三大前端框架布局element-ui(1.布局)

最早的时候用过bootstrap,接着就是layui,再接着接触了Vue,然后就认识了element-ui,今天,想写一个系列的文章记录下我上一阶段学习element-ui的过程,首先先从布局开始。

首先,其实我接触的前端框架的布局方式,都特别的像,基本上你如果运用一个很熟练了,其他的一点就通。

(1)el-row和el-col配合使用

这个el-row定义的就是一行,然后这行被分为24列,这24列被el-col分配,配置里面的:span属性就可以分配这一行空间了。


el-row el-col

            1.1:列与列之间的间距可以在el-row中绑定:gutter来设定,:gutter绑定的是px


:gutter

            1.2:列的偏移量:el-col中绑定::offset=""来设置,绑定的是栏数


:    offset

            1.3 :对齐方式(left,center,right)

                设置el-row中的属性type,justify设置不同的对齐方式(start(左), center(中), end(右), space-between(列之间中间平均分配), space-around(整行平均列之间全部平均分配) )

type,justify


space-between,space-around

补充:xs、sm、md、lg 和 xl,至此的不同屏幕大小下的响应式布局。


好了,以上了解的就是关于布局的全部内容了,下面在来补充一点用来构建后天管理系统的布局搭建

(1)会使用el-container,el-main,el-aside,el-header,el-footer来快速布局

el-main,el-aside(有width属性),el-header(height属性),el-footer(height属性)必须要在el-container里面


概要
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容