layui入门总结

1. 前言

LayUI 是一款采用自身模块规范的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写和组织形式，让前端工程师专注于业务，从而在工作效率上得到大幅度提升。本文将从我作为一个前端菜鸟的角度出发，分享一下在学习 LayUI 的过程中所得到的一些总结。

2. 下载及安装

2.1 官网下载

LayUI 官网地址：https://www.layui.com/

在官网首页的导航栏中，我们可以看到“下载”选项，该选项下提供了各种版本的 LayUI 压缩包下载。在本地解压后，我们可以看到其中有几个文件夹，具体解释见下：

├── css                  样式目录
│?? ├── layui.css        Layui的css文件
│?? ├── layui.mobile.css Layui手机版css文件
│?? └── modules          Layui模块样式目录
├── font                 字体目录
│?? └── iconfont         字体图标目录
├── images               图片目录
│?? └── Layui             Layui图片目录
├── layui.all.js         包含所有 Layui 模块的官方文件
├── layui.js             仅包含核心模块的官方文件
├── layui.mobile.js      Layui手机版业务层文件
├── modules              Layui各模块的业务层文件目录
└── README.md            使用说明文档

2.2 CDN 引入

Layui 提供了 CDN 引入方式，可直接在 HTML 文件中使用以下代码引入：

<!-- 引入layui基础样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.7/css/layui.min.css" integrity="sha384-HB8IL4W1SgsN1hXl7Ud+yahMRdfLN8r+bfoQSETu+MZNQJ6ihr5I1ozEZMkmOewe" crossorigin="anonymous">
<!-- 引入layui组件 -->
<script src="https://cdn.bootcss.com/layui/2.5.7/layui.min.js" integrity="sha384-R8GDfq5Y3GhlQR9lKBKXzTK5PpiwzLQzARtAi9uslN4Bqrmjr4sOc8K9i8nlpVgl" crossorigin="anonymous"></script>

3. LayUI 布局

3.1 LayUI 矩阵容器

LayUI 提供了矩阵容器来实现灵活的布局，可以根据需要设置容器的类名和属性，下面是几个常用的矩阵容器：

// 固定列宽（最大宽度）
<div class="layui-container">...</div>
// 自由浮动列（宽度之和不超过12）
<div class="layui-fluid">...</div>
// 栅格
<div class="layui-row">...</div>
<div class="layui-col-md9"></div>
<div class="layui-col-md3"></div>
// 嵌套栅格
<div class="layui-row">
    <div class="layui-col-md10">
        <div class="layui-row">
            <div class="layui-col-md6"></div>
            <div class="layui-col-md6"></div>
        </div>
    </div>
    <div class="layui-col-md2"></div>
</div>

3.2 LayUI 常用 CSS 类

LayUI 预置了一些常见的 CSS 样式，可以在使用时直接引用，下面列出了一些常用的 CSS 类：

// 常用
layui-bg-blue       // 蓝色
layui-bg-gray       // 灰色
layui-bg-black      // 黑色
layui-bg-red        // 红色
layui-bg-orange     // 橙色
layui-bg-green      // 绿色
layui-bg-cyan       // 青色
layui-bg-purple     // 紫色
layui-border-box    // 方框内外边框
layui-clear         // 清除浮动
layui-disabled      // 禁用状态
layui-anim          // 动画效果
// 文本
layui-text-center   // 居中
layui-text-left     // 居左
layui-text-right    // 居右
layui-text-justify  // 两端对齐
layui-text-nowrap   // 显示一行
layui-text-uppercase// 大写
layui-text-lowercase// 小写
layui-text-uppercase// 首字母大写
// 图片
layui-circle        // 圆形图片
layui-img-shadow    // 图片阴影
layui-img-hover     // 鼠标移上图片产生阴影效果
// 按钮
layui-btn-primary   // 原始
layui-btn-normal    // 常规
layui-btn-danger    // 危险
layui-btn-disabled  // 禁用
// 输入框
layui-input         // 输入框
layui-form-checkbox // 复选框
layui-form-radio    // 单选框
// 辅助元素
layui-badge         // 徽章
layui-anim-rotate   // 旋转动画
layui-anim-scale    // 缩放动画
layui-anim-fadein   // 渐显动画
layui-anim-fadeout  // 渐隐动画

4. LayUI 组件

LayUI 自带了一些常见的组件，包括但不限于：

弹层（layer）

日期选择器（laydate）

表格（table）

表单（form）

进度条（progress）

轮播图（carousel）

选项卡（element）

树形控件（tree）

这些组件的具体使用方法可以在官方文档中找到详细的说明。例如，如果我要使用 layer 弹层组件，可以在 HTML 页面中先引入 Layer 的 CSS 和 JS 文件：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

然后，就可以在 JS 代码中使用 layer 组件了，例如下面的代码：

layui.use('layer', function(){
    var layer = layui.layer;
    layer.msg('Hello World');
});

以上代码表示，当页面渲染完成后，先引入 layui 的 layer 组件，然后使用 layer 的 msg 方法来弹出一个消息框，“Hello World”即为消息框中的内容。

5. 总结

总的来说，LayUI 是一款非常好用且强大的前端 UI 框架。相比于其他框架，它好用的地方在于它的模块化设计，提高了前端工程师的开发效率。在学习 LayUI 的过程中，我们需要先学会使用 LayUI 的布局和 CSS 类，然后再深入理解和使用其中的组件。最后，希望这篇文章可以对正在学习 LayUI 的人有所帮助。