《Layui官方教程文档》

什么是Layui? Layui是开源模块化前端 UI 组件库，基于浏览器端原生态模式，面向全层次的前后端开发者，易上手且开源免费的 Web 界面组件库。

layui有什么特点？

1.返璞归真
身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。

2.双面体验
拥有双面的不仅是人生，还有 layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。

3.星辰大海
如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是 layui 不熄的执念。

本教程基于Layui官方文档整理而来，是你开发，学习的不二选择。

• 第一章 基础说明
• 1.1 开始使用 - 入门指南
• layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过
• 1.2 底层方法
• 本篇主要介绍基础库所发挥的作用，其中过滤了大部分在外部不常用的方法，侧重罗列了基础框架支撑。全局配置 方法：layui.config(options) 你可以在使用模块之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下： layui.con
• 1.3页面元素规范与说明
• layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。 CSS 内置公共基础类 类名（c
• 1.4 模块规范
• layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。预先加载模块layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义： layui.use(['form', 'upl
• 1.5 常见问题
• 本篇将主要讲解使用过程中普遍遇到的“问题”，并非是 BUG，通常是需要我们自己去注意的一些点。（持续补充） 哪里有 layui 未压缩源代码？ 之所以在下载包里没有提供未压缩的源代码，是为了方便直接用于生产环境。layui 源代码可通过以下平台获取： 1.GitHub 2.Gitee 应该如何加载模块？ JS layui.use([&#3
• 第二章 页面元素
• 2.1 栅格系统与后台布局
• 如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统
• 2.2 layui 配色方案
• 视觉疲劳源自颜色过于丰富或过于单一形成的麻木感，而 layui 提供的色彩，清新而不乏深沉，相互柔和，不过分刺激大脑皮层的神经反应，形成经久耐看的微妙视图。合理搭配，可避免与各式各样的页面产生违和感，使你的 Web 页面看上去更为融洽。 基色调#009688主色调#5FB878次色调#1E9FFF经典蓝#393D49常用于导航la
• 2.3 字体图标
• layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。使用方式 通过对一个内
• 2.3 CSS3动画类
• 在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。 使用方式 动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：
• 2.4 按钮
• 向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。 用法 <button type="button" class="layui-b
• 2.5 表单
• 在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能） 小睹为快通过上
• 2.6 导航相关 - 页面元素
• 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交
• 2.7 菜单
• 菜单是页面必不可少的元素，我们希望它是通用的，所以在结构上，它的组成极其灵活。而事实上，在基础菜单还没有正式推出之前，垂直导航（layui-nav-tree）曾顶替了它的角色，尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴，但我们姑且约定将水平的称之为「导航」，垂直的称之为正统
• 2.8 Tab选项卡
• 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。 依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常
• 2.9 进度条
• 进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。 依赖加载组件：element 常规用法我们进度条提供了两种尺寸及多种颜色的显示风格，其中颜色的选值可参考：背景色公共类。基本元素结构如下HTML结构 <div class="layui-progress">&
• 2.10 面板
• 一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等 依赖加载组件：element 常规面板代码：<div class="layui-row layui-col-space15"><div class="layui-
• 2.11 表格
• 本篇为你介绍表格的HTML使用，你将通过内置的自定义属性对其进行风格的多样化设定。请注意：这仅仅局限于呈现基础表格，如果你急切需要的是数据表格（datatable），那么你应该详细阅读：table模块 常规用法昵称加入时间签名贤心2016-11-29人生就像是一场修行许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年
• 2.12 徽章
• 徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。 快速使用 不妨先来看看 徽章 这个小小的大家族吧：你可能已经敏锐地发现，除去花枝招展的七种颜色，徽章具有三种不同的风格类型：小圆点、椭圆体、边框体 小圆点，通过 layui-badge-dot 来定义，里面不能加文字 <span class="layui-
• 2.13 时间线
• 将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。 快速使用对应的代码 <ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"
• 2.14 简单辅助元素
• 本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块 引用区块目前内置了上述两种风格HTML结构 <blockquote class="layui-elem-quote">引用区域的文字</blockquote> <blockquote class=&quo
• 第三章 内置模块
• 3.1 弹层组件
• layer 作为 Layui 的代表性组件 ，比 Layui 要出现的早，作为 Layui 最早的源动力，layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案
• 3.2 日期和时间组件
• laydate 曾作为 Layui 的单独组件而存在，因此其采用的是原生 JS 编写（可单独引用）。目前也是 Layui 的常用组件之一。 模块加载名称：laydate 快速使用 这是一个最简单的示例： <!D
• 3.3 分页模块组件
• layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的 UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。 模块加载
• 3.4 模板引擎组件
• laytpl 是一款轻量的 JavaScript 模板引擎，在字符解析上有着比较出色的表现。 模块加载名称：laytpl，在线调试：/demo/laytpl.html快速使用 laytpl 模板可与数据共存，这意味着可直接在模板中处理逻辑。 layui.use('laytpl', function(){var la
• 3.5 table 数据表格插件
• table 是 layui 中使用频率非常高的一个组件，用于在表格中对数据进行一系列动态化的操作，涵盖了日常业务所涉及的大部分需求 模块加载名称：table 快速使用上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式： 对应的代码 <!DOCTYPE html> <html> <head><m
• 3.6 表单插件
• 在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 依赖加载模块：form （请注意：如
• 3.7 上传插件 upload
• 上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的 UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的 DIV 等等，而不再是一个单调的 file 文件域。模块加载名称：upload快速使用 一切从小试牛刀开始。通常情况下，我
• 3.8 下拉菜单组件
• dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。 模块加载名称：dropdown 快速使用代码： <button class=&quot
• 3.9 树形组件
• 在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果您的项目中仍然采用了 layui 2.5 版本之前的 tree，它将不被兼容，请尽快修改为以下新的调用方式。 模块加载名称：tree 快速使用 通过 tree.render() 方
• 3.10 颜色选择器组件
• 在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色。 模块加载名称：colorpicker 注意：colorpicker 为
• 3.11 常用元素操作
• 页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。 模块加载名称：element 使用 元素功能的开启只
• 3.12 滑块插件
• 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。layui 深以为然，slider 模块包含了你能想到的大部分功能，尽管它可以作为一个独立的个体，但很多时候它往往会出现 form 元素中，想象一下吧。 模
• 3.13 评分组件
• rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为 2.3.0 版本新增 模块加载名称：rate 使用 rate 组件可以用来进行展示或评价，你只需要通过更改参数设定来开启你想要的功能，如下是一个最基本的例子： layui.rate小例子 &l
• 3.14 通用轮播组件
• carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。
• 3.15 流加载组件
• 该模块包含信息流加载和图片懒加载两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了，但不妨现在开始，体验一下Layui更为简单和高效的Flow吧。 模块加载名称：flow 使用 flow模块包含两个核心方法，如下所示： layui.use('flow', function(){va
• 3.16 工具集组件
• 我们将一些工具性元素放入 util 模块中，以供选择性使用。其内部由多个小工具组件组成，他们也许不是必须的，但很多时候却能为你的页面提供良好的辅助作用。 模块加载名称：util 固定块 语法：util.fixbar(options) 其中参数 options 是一个对象，可支持的key如下表：参数类型描述bar1Boolean/String默认false
• 3.17 代码文本修饰组件
• code 是 Layui 中一款非常轻量和易用的代码区域或文本行修饰组件。 模块加载名称：code 使用 这是一个简单的示例： html <pre class="layui-code"> // 在里面存放任意的文本内容 code line code line </pre><!