文章目录

  • 一、前言
  • 二、引入模板
  • 1、去gitub仓库下载layui开发包
  • 2、引入模板
  • 3、验证
  • 三、布局
  • 1、布局容器
  • 2、栅栏系统
  • 四、颜色
  • 五、图标
  • 六、动画
  • 七、按钮
  • 八、表单框
  • 九、导航
  • 1、普通导航
  • 2、面包屑
  • 十、选项卡
  • 十一、表格
  • 十二、徽章
  • 十三、时间线
  • 十四、分页插件
  • 十五、轮播图


一、前言

为后端量身定做的前端框架。
很遗憾在你下线之后才去了解你

二、引入模板

1、去gitub仓库下载layui开发包

下载地址

2、引入模板

<!DOCTYPE html>
<html lang="en">
<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">
    <title>layui</title>
</head>
<body>
<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>

3、验证

XLua 框架 yll框架_layui


网页中心出现内容时，说明引入成功

三、布局

布局与bootstrap十分相似，就是类名前加上了layui（不多赘述）
可以参考：bootstrap学习笔记

1、布局容器

页面的所有内容都放在此容器中

layui-container:固定宽度并支持响应式布局的容器 (两侧会有留白)

layui-container-fluid:100%宽度

2、栅栏系统

<div class="layui-container" style="background-color: #00F7DE;height:220px">
    <div class="layui-row">
        <div class="layui-col-lg2" style="background-color: #666666">2</div>
        <div class="layui-col-lg4" style="background-color: #FF5722">4</div>
    </div>
    <div class="layui-row">
        <div class="layui-col-lg2" style="background-color: #01AAED">2</div>
        <div class="layui-col-lg4" style="background-color: #cccccc">4</div>
    </div>
</div>

四、颜色

layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等

赤色：class="layui-bg-red" 橙色：class="layui-bg-orange" 墨绿：class="layui-bg-green" 藏青：class="layui-bg-cyan" 蓝色：class="layui-bg-blue" 雅黑：class="layui-bg-black" 银灰：class="layui-bg-gray"

<!DOCTYPE html>
<html lang="en">
<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">
    <title>layui</title>
</head>
<div class="layui-container" style="background-color: #00F7DE;height:400px">
   <div class="layui-bg-black">雅黑</div>
   <div class="layui-bg-orange">橙色</div>
   <div class="layui-bg-red">赤色</div>
   <div class="layui-bg-green">墨绿</div>
   <div class="layui-bg-cyan">藏青</div>
   <div class="layui-bg-blue">雅黑</div>
</div>
<body>
<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>

效果：

XLua 框架 yll框架_javascript_02

五、图标

layui有许多好看且实用的小图标
例：
实心爱心：layui-icon-heart-fill 空心爱心：layui-icon-heart 笑脸表情：layui-icon-face-smile 赞：layui-icon-praise

利用jq实现简单的 关注效果

XLua 框架 yll框架_ico_03

代码如下：

<!DOCTYPE html>
<html lang="en">
<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">
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
</head>
<div class="layui-container" style="height:400px">
    <div>
    <i class="layui-icon layui-icon-face-smile" style="font-size: 20px;color: red"></i>
        </div>
    <div>
    <button class="layui-icon layui-icon-heart" style="font-size: 20px;color: red" id="guanzhu">点击关注</button>
    <button class="layui-icon layui-icon-heart-fill" style="font-size: 20px;color: red" id="guanzhu0" hidden="hidden">关注成功</button>
    </div>
</div>
<body>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        layer.msg('Hello World');
    });

    $("#guanzhu").click(
        function () {
            $("#guanzhu").hide();
            $("#guanzhu0").show();
        }
    )
</script>
</body>
</html>

六、动画

类型：

顶部往下滑入：layui-anim-down 微微往下滑入：layui-anim-downbit

底部往上滑入：layui-anim-up

微微往上滑入：layui-anim-upbit

平滑放大：layui-anim-scale

弹簧式放大：layui-anim-scaleSpring

平滑放小：layui-anim-scalesmall

弹簧式放小:layui-anim-scalesmall-spring

渐现：layui-anim-fadein

渐隐：layui-anim-fadeout

360度旋转：layui-anim-rotate

循环动画：追加：layui-anim-loop

XLua 框架 yll框架_ico_04

七、按钮

标准按钮：layui-btn主题按钮：
原始： class="layui-btn layui-btn-primary" 默认 class="layui-btn" 百搭 class="layui-btn layui-btn-normal" 暖色 class="layui-btn layui-btn-warm" 警告 class="layui-btn layui-btn-danger" 禁用 :class="layui-btn layui-btn-disabled"尺寸:
大型 class="layui-btn layui-btn-lg" 默认 class="layui-btn" 小型 class="layui-btn layui-btn-sm" 迷你 class="layui-btn layui-btn-xs"圆角按钮：layui-btn-radius

<div class="layui-container" style="height:400px">
    <button type="button" class="layui-btn layui-btn-lg">大标准按钮</button>
    <button type="button" class="layui-btn-warm">暖色钮</button>
    <button type="button" class="layui-btn-disabled">禁用按钮</button>
    <button type="button" class="layui-btn-warning layui-btn-radius">警告按钮且圆角</button>
</div>

XLua 框架 yll框架_bootstrap_05

按钮组：

<div class="layui-btn-group">
        <button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">编辑</button>
        <button type="button" class="layui-btn">删除</button>
    </div>

    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
    </div>

    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
    </div>

XLua 框架 yll框架_layui_06

八、表单框

注意：依赖加载模块 form

layui.use(['layer', 'form'], function () {
    var layer = layui.layer
        , form = layui.form;

XLua 框架 yll框架_ico_07

<form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

九、导航

1、普通导航

依赖加载模块：element

layui-this：默认选中
layui-nav-child：二级菜单

<ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">C++</a></li>
        <li class="layui-nav-item layui-this"><a href="">PHP</a></li>
        <li class="layui-nav-item"><a href="">Python</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">Java</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">SE</a></dd>
                <dd><a href="">EE</a></dd>
                <dd><a href="">ME</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">C#</a></li>
    </ul>

水平垂直侧边导航栏：
垂直导航需要追加 class：layui-nav-tree 侧边导航需要追加 class：layui-nav-tree layui-nav-side

2、面包屑

<span class="layui-breadcrumb" lay-separator="|">
  <a href="">加粗</a>
  <a href="">斜体</a>
  <a href="">标题</a>
  <a href="">删除线</a>
  <a href="">有序</a>
  <a href="">无序</a>
  <a href="">代办</a>
</span>

XLua 框架 yll框架_ico_08

十、选项卡

依赖模块：element

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

XLua 框架 yll框架_bootstrap_09


添加lay-allowClose="true 即 允许删除

XLua 框架 yll框架_ico_10

十一、表格

layui-table：基础表格
lay-even：用于开启 隔行 背景，可与其它属性一起使用

lay-skin="属性值"	line （行边框风格）
                    row （列边框风格）
                   	nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size="属性值"	sm （小尺寸）
					lg （大尺寸）	若使用默认尺寸不设置该属性即可

XLua 框架 yll框架_javascript_11

十二、徽章

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理<span class="layui-badge-dot"></span></li>
    <li>最新邮件<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>

XLua 框架 yll框架_ico_12

十三、时间线

<ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">2022/1/12</h3>
                <p>
                    学习layui
                    <br>好玩
                    <br>好用 <i class="layui-icon"></i>
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">2022/1/13</h3>
                <p>使用layui<em>完成项目</em></p>
                <ul>
                    <li>****</li>
                    <li>***</li>
                </ul>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">2022/1/14</h3>
                <p>
                    项目发布
                    <br>感谢
                    <br>再次感谢
                    <br>啦啦啦
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </ul>

XLua 框架 yll框架_XLua 框架_13

十四、分页插件

依赖：laypage模块

<div class="layui-container" style="height:400px">
    <div id="test1"></div>
</div>
<body>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer', 'form','element','laypage'], function () {
        var layer = layui.layer
            , form = layui.form
            , element =layui.element
        ,laypage=layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
        });
    });
</script>

XLua 框架 yll框架_ico_14

十五、轮播图

依赖模块：carousel

<div class="layui-container" style="height:400px">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
        </div>
    </div>
    <!-- 条目中可以是任意内容，如：<img src=""> -->
</div>
<body>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer', 'form','element','laypage','carousel'], function () {
        var layer = layui.layer
            , form = layui.form
            , element =layui.element
        ,laypage=layui.laypage
        ,carousel=layui.carousel;
        //执行一个carousel实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

XLua 框架 yll框架_bootstrap_15