Layui初步的介绍与使用介绍： Layui 是一套免费的开源 Web UI 组件库，采用自身轻量级模块化规范，遵循原生

介绍：

Layui 是一套免费的开源 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

下载与使用

官网：www.layui.com/
点击立即下载即可
下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。

使用时我们只需引入下述两个文件即可使用

<!-- LayUI的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<!-- LayUI的核心JS文件（采用模块化引入） --> 
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>

这是一个基本的入门页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <!-- LayUI的核心CSS文件 -->
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
<!-- LayUI的核心JS文件 -->
<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer,
      	  form = layui.form;

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

有四种使用方式:

官网直接下载到自己的环境中

bash
复制代码
layui/css/layui.css  
layui/layui.js

Git下载：通过 [GitHub] 或 [Gitee] 的 releases 列表下载，或直接下载整个仓库

CDN方式引用

xml
复制代码
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.18rc.2/dist/css/layui.css"rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.18-rc.2/dist/layui.js"></script>

npm下载
```
css
复制代码
npm i layui
```

栅格系统我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则

采用 class="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）元素中放入你自己的任意元素填充内容，完成布局！

示例：

<!-- 
    栅格系统
        列组合
            1. 定义行   .layui-row
            2. 定义列	.layui-col-md*
                md 表示不同屏幕的标识（xs、sm、md、lg）
                * 表示列的数量
            3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行
 -->

<!-- 布局容器 -->
<div class="layui-container">
    <!-- 定义行 -->
    <div class="layui-row">
        <!-- 定义列  -->
        <div class="layui-col-md5" style="background-color: deepskyblue;">
            内容5/12
        </div>
        <div class="layui-col-md7" style="background-color: bisque;">
            内容7/12
        </div>
    </div>

<!-- 定义行 -->
<div class="layui-row">
    <!-- 定义列  -->
    <div class="layui-col-md4" style="background-color: powderblue;">
        内容4/12
    </div>
    <div class="layui-col-md4" style="background-color: mediumaquamarine;">
        内容4/12
    </div>
    <div class="layui-col-md6" style="background-color: grey;">
        内容6/12
    </div>
</div>