LayUI -- 基础入门

科技2023-09-24 73

LayUI基础入门

layui 栅格系统栅格布局的规则：布局容器：列间距：

layui 栅格系统

layui栅格系统方案可以使我们轻松的构建响应式的web界面 -- layui 将容器分成 12 等分 -- layui 4 x 12 种css排列类 -- 四种设备尺寸移动平板 PC 大屏幕

栅格布局的规则：

1.采用 layui-row 来定义行 2.采用 layui-col-md* 预设定义一组列，且放在row内，其中md是设备尺寸，*变量是该列所占 n/12等份 3.列可以出现多种屏幕尺寸的组合，以呈现更加灵活的布局 xs sm md lg

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>栅格系统</title> <link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.all.js"></script> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3 layui-bg-blue">我是列</div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3 layui-bg-orange">我是列</div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3 layui-bg-gray">我是列</div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3 layui-bg-green">我是列</div> </div> </div> </body> </html>

布局容器：

–layui-container:宽度固定容器 –layui-fluid:100%自适应容器

<div class="layui-container layui-bg-red" style="height: 200px;display: block"> layui-container </div> <div class="layui-fluid layui-bg-blue" style="height: 200px;display: block"> layui-fluid </div>

列间距：

1.通过列间距预设类来设置列之间的间距，特点：最左边的列左边不会有间距，同理右边不会有间距 2.十二种尺寸的列边距预设类，分别是layui-col-space(1,2,4,6,8,10…30) 3.列间距设置了好像没有效果，这是因为他是设置的padding,向内收缩，如果设置了背景颜色就看不出来，只需要在内部加上一层div就好了

Processed: 0.019, SQL: 8