该博客主要介绍了layui组件，包括基础参数的设置，如基本层类型、标题和图标等。
LayUI
的介绍
layui
（谐⾳：类
UI)
是⼀款采⽤⾃身模块规范编写的前端
UI
框架，遵循原⽣
HTML/CSS/JS
的书写与组织形式，⻔槛极低，拿来即⽤。
由国⼈开发，
16
年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和
Bootstrap
有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后
端⼈员的开发成本。
LayUI
的特点
（
1
）
layui
属于轻量级框架，简单美观。适⽤于开发后端模式，它在服务端⻚⾯上有⾮常好的效果。
（
2
）
layui
是提供给后端开发⼈员的
ui
框架，基于
DOM
驱动
栅格系统
为了丰富⽹⻚布局，简化 HTML/CSS
代码的耦合，并提升多终端的适配能⼒，
layui
引进了⼀套具备响应式能⼒的栅格系统。将容器进⾏了
12
等分，预设了
4*12
种
CSS
排列类，它们在移动设备平
板、桌⾯中
/
⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤
栅格布局规则
1.
采⽤
layui-row 来定义⾏，如
<div class="layui-row"></div>
2.
采⽤类似
layui-col-md*
这样的预设类来定义⼀组列（
column
），且放在⾏（
row
）内。其中：
变量 md
代表的是不同屏幕下的标记
变量 *
代表的是该列所占⽤的
12
等分数（如
6/12
），可选值为
1 - 12
如果多个列的“
等分数值
”
总和等于
12
，则刚好满⾏排列。如果⼤于
12
，多余的列将⾃动另起
⼀⾏。
3.
列可以同时出现最多四种不同的组合，分别是：
xs
（超⼩屏幕，如⼿机）、
sm
（⼩屏幕，如平
板）、
md
（桌⾯中等屏幕）、
lg
（桌⾯⼤型屏幕）。
4.
可对列追加类似
layui-col-space5
、
layui-col-md-offffset3
这样的预设类来定义列的间距和偏移。
5.
可以在列（
column
）元素中放⼊你⾃⼰的任意元素填充内容
如：
列边距
通过“
列间距
”
的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤
的边距，预设了
12
种不同尺⼨的边距
⽀持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
注意：
1. layui-col-space
：设置后不起作⽤主要是因为
设置的是
padding
,
也就是说是
向内缩
，所以设置背
景⾊
padding
也是会添上颜⾊，看起来好像没有间距⼀样。可以在⾥⾯在加⼀个
div
，来达到⽬
的。
2.
间距⼀般不⾼于
30px
，如果超过
30
，建议使⽤列偏移。
列偏移
对列追加 类似
layui-col-md-offffset*
的预设类，从⽽让列向右偏移。其中
*
号代表的是偏移占据的列数，可选中为
1 - 12
。
如：
layui-col-md-offffset3
，即代表在
“
中型桌⾯屏幕
”
下，让该列向右偏移
3
个列宽度
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: rosybrown;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4"
style="background-color: cornflowerblue;">
偏移4列，从⽽在最右
最低0.47元/天 解锁文章
扫一扫
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
