Layui-极简模块化前端UI组件库----快速上手

  layui介绍

  Layui 是一套前端 UI 组件库，其设计风格极简化且模块化。遵循原生的 HTML/CSS/JS 开发方式，使得开发者可以更容易地上手使用。此外，Layui 提供了丰富的内置模块，例如：表格、表单、按钮等等。用户可以通过访问官方网站下载到最新版的 Layui，该版本已经过自动化构建，更加适合用于生产环境。总的来说，Layui 是一个开源且易于使用的 Web UI 解决方案，适用于各种前端开发需求。

Layui - 极简模块化前端 UI 组件库(官方文档)

LayUI特点

• layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务器页面上有非常好的效果
• layui是提供给后端开发人员的ui框架，基于DOM驱动

使用方法

  使用layui的方法有多种，我们可以在HTML文件中直接引用layui的cdn或者下载到本地在进行引入

直接使用引入cdn 

<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.18-rc.1/dist/css/layui.css" rel="stylesheet">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.18-rc.1/dist/layui.js"></script>

​

下载到本地引入使用

下载后解压到要引用的文件下

​

 vscode打开所在文件夹会有layui文件

​

本地引入layui.js、layui.css 

​

响应式规则 

栅格的响应式能力，得益于 CSS3 媒体查询（Media Queries），针对不同尺寸的屏幕进行相应的适配处理。

布局

栅格布局

固定宽度

• 固定宽度。将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
• 固定宽度的两侧有留白效果

运行效果 

完整宽度

• 可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
• 完整宽度占据屏幕宽度的100%

 运行效果

栅格系统

  采用业界比较常用的容器横向 12 等分规则，预设了 5*12 种 CSS 排列类，内置多种大小尺寸的多终端适配，能很好地实现响应式布局，这意味着一套系统，能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕，使得网页布局变得更加灵活，同时也极大地降低了 HTML/CSS 代码的耦合。

栅格布局规则