LayUI入门基础篇1乐字节架构大数据

如果须要更多材料点击下方图片加好友支付⬇（注明来意

layui（谐音：类 UI) 是一款采纳本身模块标准编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织模式，门槛极低，拿来即用。

由国人开发，16 年出厂的框架，其次要提供了很多难看、不便的款式，并且根本拿来即用，和 Bootstrap 有些类似，但该框架有个极大的益处就是定义了很多前后端交互的款式接口，如分页表格，只需在前端配置好接口，后端则依照定义好的接口规定返回数据，即可实现页面的展现，极大缩小了后端人员的开发成本。

官网：https://www.layui.com

官网文档：https://www.layui.com/doc/

（1）layui 属于轻量级框架，简略好看。实用于开发后端模式，它在服务端页面上有十分好的成果。

（2）layui 是提供给后端开发人员的 ui 框架，基于 DOM 驱动。

在官网首页下载到 layui 的最新版。目录构造如下：

 ├─css // css 目录
  │  │─modules // 模块 css 目录（个别如果模块绝对较大，咱们会独自提取，比方上面三个：）│  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 外围款式文件
  ├─font  // 字体图标目录
  ├─images // 图片资源目录（目前只有 layim 和编辑器用到的 GIF 表情）│─lay // 模块外围目录
  │  └─modules // 各模块组件
  │─layui.js // 根底外围库
  └─layui.all.js // 蕴含 layui.js 和所有模块的合并文件

取得 layui 后，将其残缺地部署（拷贝到我的项目中）到你的我的项目目录，你只须要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js // 提醒：如果是采纳非模块化形式，此处可换成：./layui/layui.all.js

根本的入门页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title> 开始应用 layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="layui/layui.js"></script>
<script>
    // 模块和回调函数
    // 个别间接写在一个 js 文件中
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;

      layer.msg('Hello World');
    });
</script> 
</body>
</html>

还须要申明须要应用的模块和 回调函数。参照官网文档，抉择本人想要的成果就行。

比方：

<script>
    // 留神：导航 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){
          var element = layui.element;

          //…
    });
</script>

固定宽度

将栅格放入一个带有 class=”layui-container” 的特定的容器中，以便在小屏幕以上的设施中固定宽度，让列可控。

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>

残缺宽度

能够不固定容器宽度。将栅格或其它元素放入一个带有 class=”layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">
  ……
</div>

为了丰盛网页布局，简化 HTML/CSS 代码的耦合，并晋升多终端的适配能力，layui 引进了一套具备响应式能力的栅格零碎。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在挪动设施、平板、桌面中 / 大尺寸四种不同的屏幕下施展着各自的作用。

栅格布局规定

采纳 layui-row 来定义行，如：
```
<div class="layui-row"></div>
```
采纳相似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
- 变量 md 代表的是不同屏幕下的标记
- 变量 * 代表的是该列所占用的 12 等分数（如 6 /12），可选值为 1 – 12
- 如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于 12，多余的列将主动另起一行。
列能够同时呈现最多四种不同的组合，别离是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。
可对列追加相似 layui-col-space5、layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
能够在列（column）元素中放入你本人的任意元素填充内容

示例：

<h3> 惯例布局（以中型屏幕桌面为例）：</h3>
<div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      你的内容 9/12
    </div>
    <div class="layui-col-md3" style="background-color: rosybrown;">
      你的内容 3/12
    </div>
</div>

响应式规定

栅格的响应式能力，得益于 CSS3 媒体查问（Media Queries）的强力反对，从而针对四类不同尺寸的屏幕，进行相应的适配解决。

	超小屏幕 (手机 <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
响应行为	始终按设定的比例程度排列	在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列	在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列	在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列

<h3> 平板、桌面端的不同体现：</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4"  
         style="background-color: thistle">
        平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
</div>

<div class="layui-row">        
    <div class="layui-col-sm4 layui-col-md6"  
         style="background-color: mediumaquamarine;">
        平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" 
         style="background-color: coral">
        平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
</div>

列边距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会呈现右边距，最右的列不会呈现左边距。列间距在保障排版好看的同时，还能够进一步保障分列的宽度精密水平。咱们联合网页罕用的边距，预设了 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

示例：

<h3> 列间距 </h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- 须要在 layui-col-md4 外面再加一层 div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

注：

layui-col-space：设置后不起作用次要是因为 设置的是 padding, 也就是说是 向内缩，所以设置背景色 padding 也是会添上色彩，看起来如同没有间距一样。能够在外面在加一个 div，来达到目标。
间距个别不高于 30px，如果超过 30，倡议应用列偏移。

列偏移

对列追加相似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 – 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 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 列，从而在最右
    </div>
</div>

注：列偏移可针对不同屏幕的规范进行设定，在以后设定的屏幕下无效，当低于桌面屏幕的规定的临界值，就会重叠排列。

列嵌套

能够对栅格进行无穷档次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可实现嵌套。

<h3> 列嵌套 </h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                外部列
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                外部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                外部列
            </div>
        </div>
    </div>
</div>

<h3> 外部列 <h3>
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                外部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                外部列
            </div>
        </div>
    </div>
</div>

LayUI入门基础篇1乐字节架构大数据

LayUI

次要内容

LayUI 的装置及应用

LayUI 的介绍

LayUI 的特点

下载与应用

页面元素

布局

布局容器

固定宽度

残缺宽度

栅格零碎

栅格布局规定

响应式规定

列边距

列偏移

列嵌套

Just My Socks（注册教程内含优惠码）

LayUI入门基础篇1乐字节架构大数据

LayUI

次要内容

LayUI 的装置及应用

LayUI 的介绍

LayUI 的特点

下载与应用

页面元素

布局

布局容器

固定宽度

残缺宽度

栅格零碎

栅格布局规定

响应式规定

列边距

列偏移

列嵌套

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）