Layui的基本使用(Idea)

sleep22

已于 2022-04-10 17:55:06 修改

阅读量3.7k

点赞数

分类专栏：前端学习笔记文章标签： intellij idea html5

于 2022-03-27 10:46:08 首次发布

本文链接：https://blog.csdn.net/weixin_60096751/article/details/123737878

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

官网下载：在线示例 - Layui

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

目录结构：

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

Layui部分模块依赖jQuery（比如layer) 引用 jQuery

新建一个项目Idea ->file->new->project->Spring Initializr->next->next->web->Spring Web Spring Reactive Web-> 改文件路径->把下载的layui文件夹内css font layui.js贴进新建的文件夹中 link href的路径(将解压包文件部署到项目中，引入两个文件)

布局、颜色、图标

<!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">
    <!--添加背景色-->
    <style type ="text/css">
        .b{
            background-color:deeppink;
        }
        .b2{
            background-color: pink;
        }
    </style>

</head>
<body>

<!-- 你的 HTML 代码 -->
<i class="layui-icon">&#xe7ae;</i>
<i class="layui-icon layui-icon-website" style="font-size: 50px; color: greenyellow;"></i>
<i class="layui-icon">&#xe7ae;</i>
<p class="layui-bg-red">Layui</p>
<i class="layui-icon">&#xe627;</i>

<!-- layui的动画效果 -->


<!--div class="layui-fluid"--><!--平铺-->
    <div class="layui-container">
    常规布局（以中型屏幕桌面为例）：
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="b">你的内容 9/12</div>
        </div>
        <div class="layui-col-md3">
            <div class="b2">你的内容 3/12</div>
        </div>
    </div>

    移动设备、平板、桌面端的不同表现：
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="b">移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="b2">移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="b">移动：4/12 | 平板：12/12 | 桌面：4/12
        </div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="b2">移动：4/12 | 平板：7/12 | 桌面：8/12
        </div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="b">移动：4/12 | 平板：5/12 | 桌面：4/12
        </div>
        </div>


        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="b">1/3
            </div>
            </div>
            <div class="layui-col-md4">
                <div class="b2">1/3
            </div>
            </div>
            <div class="layui-col-md4">
                <div class="b"> 1/3
            </div>
            </div>

        </div>

    </div>
</div>
    <script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

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

例：<link rel="stylesheet" href="IdeaProject/css/layui.css">

动画、按钮、表单

表单

实现效果（复选框）要用到use使用 form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<br>
<br>
<br>
<br>
<br>
<button type="button" class="layui-btn layui-anim layui-anim-scalesmall">一个标准的按钮</button>
<button type="button" class="layui-btn layui-anim layui-anim-scaleSpring">一个标准的按钮</button>
<a href="https://www.layuiweb.com" class="layui-btn layui-anim layui-anim-rotate layui-anim-loop">一个可跳转的按钮</a>


</html>

... ...

sleep22

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Layui的基本使用(Idea)

官网下载：在线示例 - Layuilayui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这..
复制链接

扫一扫