ElementUI之基础布局及混合布局

简介: ElementUI之基础布局及混合布局

1 引言

这次简单介绍Element-ui的基础布局,让同学们初步了解element-ui。

2方法

通过基础的 24 分栏,迅速简便地创建布局。

基础布局的定义:使用单一分栏创建基础的栅格布局。
通过 row(行) 和 col (单元格)组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。

分栏间隔:分栏之间存在间隔。
Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。

混合布局的定义:不按单一分栏创建基础的栅格布局。即在通过 row(行) 和 col (单元格)组件,并通过 col 组件的 span 属性来自由的布局。与基础布局的区别在于在同一个<el-row></el-row>下中的span属性并不相同。

修改分栏间隔:

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

3结语

针对Element-ui问题的基础布局及混合布局方法,通过在编译器的实验,简单说明了两个布局如何设置,让同学们初步了解了Element-ui。

目录
相关文章
|
6月前
|
并行计算 算法 异构计算
antv/g6之图布局及切换布局
antv/g6之图布局及切换布局
872 0
|
24天前
|
UED
常见的布局方式
【10月更文挑战第22天】这些布局方式各有特点和适用场景,在实际开发中,通常会根据具体需求选择合适的布局方式或结合多种布局方式来实现理想的页面布局效果。
32 3
|
17天前
|
前端开发 容器
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
395 0
|
编解码 前端开发 JavaScript
前端7大常用布局方式
前端7大常用布局方式
718 0
|
前端开发
CSS流动布局-页面自适应
CSS流动布局-页面自适应
132 0
|
编解码 前端开发 Android开发
移动布局基础(流式布局)
移动布局基础(流式布局)
128 0