LayUI的学习总结--知识点精华籍

时间:2024-03-13 08:00:06

LayUI的学习文档:https://www.layui.com/doc/

一、入门篇

由于没有严格按照文档中的目录结构搭建开发环境,导致在html中引入了layui的css和js后,直接use模块,仍然各种报错找不到css和js等。html文件与css目录为同级才可以,否则会报use的模块样式404的js错误。

LayUI的学习总结--知识点精华籍

二、layer.msg('Hello World'); 页面中使用停留了一会儿就消失了,刚开始以为是问题,后来发现这是msg的默认3秒自动消失的特性。

三、布局

layui-container是固定宽度1200px固定在页面中间位置的大容器。
layui-fluid是容器宽度默认是100%,撑满整个屏幕。

layui-container 内部包含 layui-row,layui-row包含 layui-col-(xs/sm/md/lg)(1-12)。

layui-col-space10 不是让列产生间距,实质是对内部元素分别增加padding为10px;

layui-col-md-offset5 右偏移5个格子

如果前面的兄弟元素layui-col-md4,后面的兄弟元素既有偏移又有自己的宽度【layui-col-md-offset5 layui-col-md4】,此时的后面的兄弟元素是另起一行右偏移5格并占据4格。