会员管理实战教程10-布局介绍

微搭低代码从入门到精通

第一章 总体介绍

第二章 数据源介绍

第三章 首页开发

第四章 用户登录及注册

第五章 权限设计

第六章 生命周期函数及自定义方法介绍

第七章 页面跳转

第八章 低码中操作数据库

第九章 低码中的调试方法

@TOC

前言

低码工具更侧重于前端开发，学习前端开发必须熟练掌握CSS的相关知识。本篇就重点介绍一下在低码中的布局相关知识。

一、网格布局

网格布局可以和word里的表格做同类型联系，比如我在word里插入一个表格。

在这里插入图片描述

一共是插入了一行12列，而网格布局里的属性可以自由选择，第一个12就代表着一行一列

在这里插入图片描述

在这里插入图片描述

一行一列自然就只有一个插槽，这个插槽就是我们可以添加内容的容器，里边可以放图片、文本、普通容器这些组件。

如果选择6:6就表示一行两列，可以有两个插槽

在这里插入图片描述

至于列比例如何选择要根据你的页面的设计决定。

什么时候选择网格布局比较好，一般在首页像那种有功能导航的，比较适合网格布局。因为功能是确定的，你可以决定一行放几个布局。如果像商品列表，那种要根据商品的数量来决定显示几行的，就不太适合网格布局。

flex布局

flex布局也叫流式布局，可以想象像水流一样，从左到右流，到了边缘又到下一行从左到右流。

在这里插入图片描述

因为有了这个流动的方向，自然就有了水平和垂直的概念，通过水平和垂直来决定你里边的容器的摆布。比如你希望元素水平居中对齐，垂直居中对齐，就可以靠这两个方向的对齐方式来进行布局。

那flex布局通常用在那个组件上呢？通常用在普通容器上，由普通容器来决定里边的元素的摆放位置。

在这里插入图片描述

布局的元素

除了上述两个布局组件外，在布局组件里最长使用的两个组件是图片和文本

图片组件一般用来显示素材，我们需要的素材一般都放置在素材库里

在这里插入图片描述

需要将设计师制作的各种素材添加进来方便组件进行设置和引用

在这里插入图片描述

图片组件的图片地址属性可以通过从素材库里选择素材进行设置

在这里插入图片描述

选择了之后会自动显示图片

在这里插入图片描述

图片组件的话日常需要设置合适的宽和高，让图片的显示和设计图一样

在这里插入图片描述

文本组件的话常常设置文本的内容

在这里插入图片描述

除了文本内容外还可以设置对齐方式和颜色。

总结

以上就是低码中常用的布局组件，一般将这四个组件用熟练了，大部分的布局都可以搭建出来。