Layui

页面元素

布局

栅格系统

一、栅格布局规则：

1. layui-row：定义行
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-offset3 这样的预设类来定义列的间距和偏移
   二、响应式规则：

	超小屏幕(手机<768px)	小屏幕(平板≥768px)	中等屏幕(桌面≥992px)	大型屏幕(桌面≥1200px)
.layui-container的值	auto	750px	970px	1170px
标记	xs	sm	md	lg
列对应类 * 为1-12的等分数值	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*
总列数	12	12	12	12
响应行为	始终按设定的比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

三、响应式公共类：

类名(class)	说明
layui-show-*-block	定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline	定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block	定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-*	定义不同设备下的隐藏类，即： display: none; * 可选值同上

四、布局容器

1. layui-container：固定宽度，在屏幕中间居中显示

<div class="layui-container" style="background-color: pink;height: 300px;">
        固定宽度（两侧有留白效果）
</div>

2. layui-fluid：完整宽度，占据整个屏幕100%

<div class="layui-fluid" style="background-color: cyan;height: 300px;">
		 完整宽度(占据屏幕宽度的100%)
</div>

五、列间距：
layui-col-space*：
* 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
注意：
- layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
- 如果需要的间距高于30px（一般不常见），我们需要采用列偏移
六、列偏移：
对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移
* 号代表的是偏移占据的列数，可选中为 1 - 12
如：layui-col-md-offset3 ，即代表在 中型桌面屏幕下，让该列向右偏移3个列宽度
七、列嵌套
列之间可以无限嵌套。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套

图标

layui-icon：定义一个图标

动画

• layui-anim-down：顶部往下滑入
• layui-anim-up：顶部往上滑入
• layui-anim-downbit：微微往下滑入
• layui-anim-upbit：微微往上滑入
• layui-anim-scale：平滑放大
• layui-anim-scalesmall：平滑放小
• layui-anim-scaleSpring：弹簧式放大
• layui-anim-scalesmall-spring：弹簧式放小
• layui-anim-fadein：渐现
• layui-anim-fadeout：渐隐
• layui-anim-rotate：360度旋转
• layui-anim-loop：循环动画

按钮

layui-btn：建立一个基础按钮
按钮风格：

名称	组合
原始	class=“layui-btn layui-btn-primary”
默认	class=“layui-btn”
百搭	class=“layui-btn layui-btn-normal”
暖色	class=“layui-btn layui-btn-warm”
警告	class=“layui-btn layui-btn-danger”
禁用	class=“layui-btn layui-btn-disabled”

按钮尺寸：

尺寸	组合
大型	class=“layui-btn layui-btn-lg”
默认	class=“layui-btn”
小型	class=“layui-btn layui-btn-sm”
迷你	class=“layui-btn layui-btn-xs”

尺寸	组合
大型百搭	class=“layui-btn layui-btn-lg layui-btn-normal”
正常暖色	class=“layui-btn layui-btn-warm”
小型警告	class=“layui-btn layui-btn-sm layui-btn-danger”
迷你禁用	class=“layui-btn layui-btn-xs layui-btn-disabled”
流式按钮	class=“layui-btn layui-btn-fluid”

圆角按钮：

主题	组合
原始	class=“layui-btn layui-btn-radius layui-btn-primary”
默认	class=“layui-btn layui-btn-radius”
百搭	class=“layui-btn layui-btn-radius layui-btn-normal”
暖色	class=“layui-btn layui-btn-radius layui-btn-warm”
警告	class=“layui-btn layui-btn-radius layui-btn-danger”
禁用	class=“layui-btn layui-btn-radius layui-btn-disabled”

尺寸	组合
大型百搭	class=“layui-btn layui-btn-lg layui-btn-radius layui-btn-normal”
小型警告	class=“layui-btn layui-btn-sm layui-btn-radius layui-btn-danger”
迷你禁用	class=“layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled”

layui-btn-group：按钮组，按钮随意搭配
layui-btn-container：按钮容器

导航

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载模块：element

	<script>
        // 导航 依赖elemnet模块
        layui.use('element', function () {
            var element = Layui.element;
        });
    </script>

水平导航

• 给一个无序列表 ul 添加 class=“layui-nav”
• 给 li 添加 class=“layui-nav-ithm” 表示的是导航的子项
• 给 li 添加 class=“layui-this” 表示当前被选中的项
• 给 li 里面容器添加 class=“layui-nav-child” 表示的是二级菜单
• 设定layui-this来指向当前页面分类

文字导航内置图片和徽章
layui-badge：添加数字
layui-badge-dot：添加小圆点
layui-nav-ing：添加图片

导航主题

• 给无序列表 ul 添加 class=“layui-nav layui-bg-green” 可设置墨绿色背景的导航
• 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
• 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)

垂直导航

• 给无序列表 ul 添加 class=“layui-nav layui-nav-tree”
• 给 li 添加 class=“layui-nav-item layui-nav-itemed” 表示此子项目是默认展开的

侧边导航

• 给无序列表 ul 添加 class=“layui-nav layui-nav-tree layui-nav-side”
• 设定layui-this来指向当前页面分类

面包屑导航

• 给 span 标签 添加 layui-breadcrumb
• 通过设置属性 lay-separator=“-” 或者 lay-separator=“|” 来自定义分隔符

选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

• 默认风格给容器添加 ：class=“layui-tab”
• 简洁风格给容器追加：class=“layui-tab-brief”
• 卡片风格给容器需要追加：class=layui-tab-card

表格

1. 常规用法

• 给 table 标签增加 class=“layui-table”
• 在colgroup 标签中定义表格列的宽度
  • 表示相应列所占的宽度
• thead 标签表示表格的头部区域
  • tr 标签用于定义表格中的行(行头)
    • th 标签用于定义表格中的表头(列头)

2. 基础属性

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其他属性一起使用
lay-skin=“属性值”	line(行边框风格)、row(列边框风格)、nob(无边框风格)	若使用默认风格不设置该属性即可
lay-size=“属性值”	sm(小尺寸)、lg(大尺寸)	若使用默认尺寸不设置该属性即可