layui基础总结及学习规划

最新推荐文章于 2024-07-09 09:52:23 发布
最新推荐文章于 2024-07-09 09:52:23 发布
阅读量819 收藏 5
点赞数
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/twoyearJava/article/details/126897168
版权

1. UI框架概述

在之前所有的网页结构和样式都需要手动编写，特别是如果需要制作漂亮的页面效果，需要大量的样式代码(CSS)，为了保持网站页面风格的统一，这些样式会需要反复使用；由于这种需求的存在，目前一个个人组织或者企业单位开发出了一些界面的UI解决方案，能够使得我们在编写页面时，将这些已经处理好的css样式用到项目中（拿来即用）；目前的主流UI解决方案有以下：

  • PC端

    • bootstrap

    • elementUI

    • layui

    • UIKit

    • ant design

  • 移动端

    • vant

    • flutter

UI框架和JS框架，后端框架区别？

UI框架：用于快速构建漂亮美观的网页（CSS框架）

JS框架：用于进行前端后端交互，数据绑定，数据驱动dom等（vue,react,anglar...）

后台框架：基于服务端语言构建的组件技术（项目的半成品）

2. LayUI概述

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

3. LayUI引入

3.1. 引入方式

目录结构(v2.6.8)：

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

从v2.6.8版本开始，layui将原来的lay/modules各个模块全部合并到layui.js中

layui包含以下常用方式：

  1. 直接将下载的压缩文件解压缩到目标项目中，在项目中引入layui.css和layui.js

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    引入layui样式文件(本地项目中资源)-->
        <link rel="stylesheet" href="./asserts/layui-v2.6.8/layui/css/layui.css">
    </head>
    <body>
​
        <!--引入layui.js(本地项目中资源)-->
        <script src="./asserts/layui-v2.6.8/layui/layui.js"></script>
    </body>
</html>

  2. 使用CDN，在线引用layui

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       <!-- 引入 layui.css -->
        <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    </head>
    <body>
​
        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    </body>
</html>

4. 页面元素

4.1. 基本样式(公共class)

  • 布局/容器

类名（class）说明
layui-main用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline用于将标签设为内联块状元素
layui-box用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）

  • 辅助

类名（class）说明
layui-icon用于图标
layui-elip用于单行文本溢出省略
layui-unselect用于屏蔽选中
layui-disabled用于设置元素不可点击状态
layui-circle用于设置元素为圆形
layui-show用于显示块状元素
layui-hide用于隐藏元素

  • 文本

类名（class）说明
layui-text定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux灰色标注性文字，左右会有间隔

  • 背景色

类名（class）说明
layui-bg-red用于设置元素赤色背景
layui-bg-orange用于设置元素橙色背景
layui-bg-green用于设置元素墨绿色背景（主色调）
layui-bg-cyan用于设置元素藏青色背景
layui-bg-blue用于设置元素蓝色背景
layui-bg-black用于设置元素经典黑色背景
layui-bg-gray用于设置元素经典灰色背景

  • 字体大小

layui-font-12 （12px 的字体）
layui-font-14 （14px 的字体）
layui-font-16 （16px 的字体）
layui-font-18 （18px 的字体）
layui-font-20 （20px 的字体）

  • 字体颜色

layui-font-red （红色字体）
layui-font-orange （橙色字体）
layui-font-green （绿色字体）
layui-font-cyan （青色字体）
layui-font-blue （蓝色字体）
layui-font-black （黑色字体）
layui-font-gray （灰色字体）

4.2. 布局

4.2.1. 布局容器

在使用栅格之前一般都需要对页面的容器范围划定，使用layui-container和layui-fluid两个类划分栅格范围

  • layui-container:设置一个居中显示的布局容器，左右会根据屏幕设备留白，内部内容根据栅格配置自动布局

  • layui-fluid:设置占满屏幕100%宽的容器，内部的元素根据栅格设置自动布局

4.2.2. 栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

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

  • 关于栅格布局响应式规则

栅格布局案例：

<!--创建容器：容器中的内容一共划分为12等分-->
<div class="layui-container">
    <div class="layui-row   layui-col-space30">
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
        <div class="item layui-col-lg2 layui-col-md3 layui-col-sm4 layui-col-xs6"><img src="./img/05.jpg" alt=""></div>
    </div>
​
</div>

根据屏幕的宽度自动适配每行显示的元素个数

注意事项，在移动设备中务必需要为html页面头部添加如下定义：

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  • 列间距

    通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，取值范围layui-col-space1 ~ layui-col-space30,分辨表示每一列之间的间距为具体数值（行间距无关）

  • 列偏移

    对列追加 类似 layui-col-md-offset** 的预设类，从而让列向右偏移。其中 *** 号代表的是偏移占据的列数，可选中为 1 - 12。 如：layui-col-md-offset3*，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

    <div class="layui-container">
    <div class="item layui-col-md4"></div>
    <div class="item layui-col-md4"></div>
    <div class="item layui-col-md4"></div>
    <div class="item layui-col-md4 layui-col-md-offset2"></div>
    <div class="item layui-col-md4"></div>
    <div class="item layui-col-md4 layui-col-md-offset4"></div>
</div>

  • 列嵌套

    理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md**）中插入一个行元素（layui-row*），即可完成嵌套。

    <div class="layui-container">
    <div class="layui-row  layui-col-space30">
        <div class="left layui-col-md6"><img src="./img/05.jpg" alt=""></div>
        <div class="right layui-col-md6">
            <div class="layui-row  layui-col-space30">
                <div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div>
                <div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div>
            </div>
            <div class="layui-row  layui-col-space30">
                <div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div>
                <div class="layui-col-md6"><img src="./img/05.jpg" alt=""></div>
            </div>
        </div>
    </div>
</div>

4.3. 常用样式

4.3.1. 图标（字体图标）

iconfont,对于网页中的一些小图片需求，layui中提供了字体图标，即使用文字描述的图片效果；可以通过对文字大小，颜色控制图片的显示效果。

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，

<span class="layui-icon layui-icon-404"></span>
<i class="layui-icon layui-icon-login-wechat"></i>
<b class="layui-icon layui-icon-face-smile"></b>
<button class="layui-btn layui-btn-normal">
    <span class="layui-icon layui-icon-delete"></span>删除
</button>

4.3.2. 动画

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。

<div class="layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block">
    <span class="layui-icon layui-icon-face-cry" style="font-size: 200px"></span>
</div>
​
<div class="bg layui-anim layui-anim-rotate layui-anim-loop">
    <img src="./img/disc.png" width="100%" alt="">
</div>

layui中提供的动画效果非常有限，并且只提供了动画基本实现，如果需要对动画手动控制，则可以使用css3的原生属性，例如，设置动画的持续时长：

animation-duration:10s;

4.3.3. 按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格

  • 用法

    <button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

  • 主题1（实心按钮）

    名称组合
    原始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"

示例代码：

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">警告按钮</button>
<button class="layui-btn layui-btn-danger">危险按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

  • 主题2（空心按钮）

    名称组合
    主色class="layui-btn layui-btn-primary layui-border-green"
    百搭class="layui-btn layui-btn-primary layui-border-blue"
    暖色class="layui-btn layui-btn-primary layui-border-orange"
    警告class="layui-btn layui-btn-primary layui-border-red"
    深色class="layui-btn layui-btn-primary layui-border-black"

示例代码：

<button class="layui-btn layui-btn-primary layui-border-green">绿色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-cyan">蓝绿按钮</button>
<button class="layui-btn layui-btn-primary layui-border-black">黑色按钮</button>

  • 大小

    尺寸组合
    大型class="layui-btn layui-btn-lg"
    默认class="layui-btn"
    小型class="layui-btn layui-btn-sm"
    迷你class="layui-btn layui-btn-xs"

示例代码：

<button class="layui-btn layui-btn-primary layui-border-green layui-btn-lg">绿色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm">蓝色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs">橙色按钮</button>

  • 主题大小组合

    尺寸组合
    大型百搭class="layui-btn layui-btn-lg layui-btn-normal"
    正常暖色class="layui-btn layui-btn-warm"
    小型警告class="layui-btn layui-btn-sm layui-btn-danger"
    迷你禁用class="layui-btn layui-btn-xs layui-btn-disabled"

  • 流体按钮

    只需为按钮添加类名称layui-btn-fluid即可实现流体按钮，流体按钮会使得按钮占满父容器宽度

    <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

  • 圆角按钮

    主题组合
    原始class="layui-btn layui-btn-radius layui-btn-primary"
    默认class="layui-btn layui-btn-radius"
    百搭class="layui-btn layui-btn-radius layui-btn-normal"
    暖色class="layui-btn layui-btn-radius layui-btn-warm"
    警告class="layui-btn layui-btn-radius layui-btn-danger"
    禁用class="layui-btn layui-btn-radius layui-btn-disabled"

  • 带图标的按钮

    <button class="layui-btn layui-btn-normal">
    <i class="layui-icon layui-icon-add-circle"></i>
</button>
<button class="layui-btn layui-btn-warm">
    <i class="layui-icon layui-icon-upload"></i>
</button>
<button class="layui-btn layui-btn-danger">
    <i class="layui-icon layui-icon-user"></i>
</button>
<button class="layui-btn layui-btn-primary">
    <i class="layui-icon layui-icon-password"></i>
</button>

  • 按钮组

    将按钮包裹在class="layui-btn-group"的容器中即可实现按钮组

    <div class="layui-btn-group">
    <button class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-add-circle"></i>添加
    </button>
    <button class="layui-btn layui-btn-warm">
        <i class="layui-icon layui-icon-upload"></i>上传
    </button>
    <button class="layui-btn layui-btn-danger">
        <i class="layui-icon layui-icon-user"></i>用户信息
    </button>
</div>

  • 按钮容器

    尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器,只需将所有按钮包裹在class="layui-btn-container"即可轻松实现

    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal">按钮1</button>
    <button class="layui-btn layui-btn-normal">按钮2</button>
    ....
</div>

4.3.4. 导航与面包屑

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

依赖加载模块：element

4.3.4.1. 导航

  • 水平导航

    <ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
​
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
​
        //…
    });
</script>

    添加class名称：lay-this来指定激活项

  • 导航主题

    通过对导航追加CSS背景类，让导航呈现不同的主题色

    //如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
    …
</ul>  

    水平导航支持的其它背景主题有：layui-bg-cyan*（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝） 垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

  • 垂直导航

    <ul class="layui-nav layui-nav-tree" lay-filter="test">
    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="">跳转</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

    水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

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

    导航项添加类名称layui-nav-itemed表示为默认展开项

  • 侧边栏导航

  • 导航可选属性/类

    属性名可选值说明
    lay-shrink空值（默认） 不收缩兄弟菜单子菜单all 收缩全部兄弟菜单子菜单展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：layui 2.2.6 开始新增） 如：<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>
    lay-unselect无需填值点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增） 如：<li class="layui-nav-item" lay-unselect>刷新</li>
    lay-bardisabled 禁用滑块跟随功能在导航菜单主容器中配置，如：<div class="layui-nav" lay-bar="disabled"> </div>
    CSS 类layui-nav-child-c 子菜单居中对齐layui-nav-child-r 子菜单向右对齐直接在子菜单标签配置即可，如：</>code<dl class="layui-nav-child layui-nav-child-c"> …</dl>

4.3.4.2. 面包屑（路径导航）

  • 基础样式

    <span class="layui-breadcrumb" >
    <a href="">首页</a>
    <a href="">信息管理学院</a>
    <a href="">软件工程专业</a>
    <a href=""><cite> <i class="layui-icon layui-icon-user"></i> 2021班</cite></a>
</span>

  • 自定义分隔符

    <span class="layui-breadcrumb" lay-separator=">">
    <a href="">首页</a>
    <a href="">信息管理学院</a>
    <a href="">软件工程专业</a>
    <a href=""><cite> <i class="layui-icon layui-icon-user"></i> 2021班</cite></a>
</span>

    通过在导航元素上设置lay-separator属性值来设置分隔符

    <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>

4.3.5. 表格

layUI对于表格的支持提供了两种方案：静态表格和数据表格，这里主要讲解呈现基础表格（静态），后续课程补充讲解数据表格，详见table模块

  • 综合案例

    <!--
    layui-table:使用layui的表格样式
    lay-skin:设置表格边框风格（row，line,nob）
    lay-size:设置表格单元格大小样式（lg,sm）
    lay-even:开启隔行换色
-->
<table class="layui-table" lay-skin="nob" lay-size="lg" lay-even>
    <caption>英雄能力排行榜</caption>
    <colgroup>
        <col width="80px">
        <col width="120px">
        <col width="120px">
        <col width="120px">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>称号</th>
            <th>类型</th>
            <th>难度系数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>105</td>
            <td>廉颇</td>
            <td>正义爆轰</td>
            <td>坦克</td>
            <td>5</td>
        </tr>
        <tr>
            <td>106</td>
            <td>小乔</td>
            <td>恋之微风</td>
            <td>法师</td>
            <td>4</td>
        </tr>
        <tr>
            <td>107</td>
            <td>赵云</td>
            <td>苍天翔龙</td>
            <td>战士</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

4.3.6. 表单

<div class="layui-container">
    <h1>用户信息表</h1>
    <hr>
    <div class="layui-col-md8">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" placeholder="请输入用户名">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" placeholder="请输入密码">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">驾龄</label>
                <div class="layui-input-inline">
                    <input type="number" class="layui-input" placeholder="请输入驾龄">
                </div>
                <div class="layui-form-mid layui-word-aux">驾龄未满10年无法注册</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="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">擅长的语言</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="lang[cn]" title="中文" checked>
                    <input type="checkbox" name="lang[en]" title="英语">
                    <input type="checkbox" name="lang[kr]" title="韩语">
                    <input type="checkbox" name="lang[jp]" title="日语">
                    <input type="checkbox" name="lang[alb]" title="阿拉伯语">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">同意协议</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="lis" lay-skin="switch">
                </div>
            </div>
        </form>
    </div>
</div>
LayUI入门
liaozhixiangjava的博客
07-11 1275
Layui是一个开源的前端框架，它致力于提供简单、易用、高效的前端开发解决方案。它基于HTML5和CSS3技术，采用模块化的设计理念，提供了丰富的组件和工具，可以帮助开发者快速构建美观、功能强大的Web界面。Layui的特点包括：1. 简单易用：Layui提供了简洁明了的API接口和文档，开发者可以快速上手并轻松构建页面。2. 模块化设计：Layui采用了模块化的开发方式，将功能划分为多个独立的模块，开发者可以按需引入和使用，提高了代码的复用性和可维护性。
layui框架简单解读，为什么要使用layui框架，layui框架的好处，后端程序员快速学习掌握layui框架技术型文档博文，layui学习笔记，快速掌握前端技术框架
2401_84446882的博客
04-27 1301
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
layui学习
qq_52701502的博客
04-22 406
前端框架LayUI 学习目标 第一章 基础说明 （敲代码） 从 layui 2.6 开始，如果你引入的是构建后的 layui.js，里面即包含了 layui 所有的内置模块，无需再指定内置模块。 1.1 节 LayUI 组件化开发 LayUI使用内置模块的入门案例： 1）在gitee上下载LayUI 2）将dist目录下文件拷贝到工程中 3）创建page目录，编写入门程序 <!DOCTYPE html> <html lang="en"> <head> &lt
LayUI学习
weixin_44729070的博客
05-27 510
文章目录前言一、LayUI是什么？二、LayUI基础知识2.1 安装LayUI依赖2.2 LayUI布局栅格系统2.3 按钮2.4 导航三、标签栏2.读入数据总结 前言 LayUI课堂笔记 一、LayUI是什么？ LayUI可以帮助我们不用关注过多的css、只需要关心如何页面布局。 二、LayUI基础知识 2.1 安装LayUI依赖 可以直接百度搜索LayUI进入官方首页、点击下载即可。下载完毕后直接将解压后 的文件夹拖进idea或者其他工具中，运行test.html可以检查依赖是否安装成功。 2.2 L
layui 学习
一江水_1210的博客
01-04 356
重新渲染表单 //重新渲染表单 function renderForm() { layui.use('form', function () { var form = layui.form(); form.render(); }); }select 下来框  获取值和文本 form.on(
layui学习<一>
weixin_30591551的博客
12-13 135
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min...
layui笔记.docx
08-06
layui学习笔记 layui是一个基于JavaScript的前端框架，提供了一系列的UI组件和插件，帮助开发者快速构建Web应用程序。layui的 栅格系统是其核心组件之一，提供了灵活的布局方式，能够满足不同屏幕大小和设备的需求...
layui-v2.5.6
07-04
4. **丰富的组件**：layui提供了包括表格、表单、按钮、弹窗、导航、图标等在内的多种基础和高级组件，满足多样化的需求。 5. **主题定制**：layui允许开发者自定义皮肤，方便调整样式以符合项目需求。 6. **良好的...
基于layui实现树形穿梭框
05-22
1. layui框架基础： layui是一个轻量级的前端框架，包含丰富的模块化组件，如表格、表单、按钮、提示、弹窗等。它遵循HTML5标准，支持响应式布局，可在各种设备上良好运行。layui的代码风格简洁，学习成本低，使得...
.Net学习笔记之Layui多图片上传功能
10-16
总结来说，Layui的多图片上传功能在.NET环境中可以通过前端的Layui上传组件结合后端的文件处理逻辑来实现。前端主要负责用户交互和文件预览，后端则负责接收和保存文件。通过这样的组合，可以轻松地在.NET项目中添加...
Layui学习总结
qq_45809464的博客
03-01 1485
html日期组件 layui laydate日期文档组件 在 layui 2.0 的版本中对layDate做出了大量的更新，以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。 在这里插入代码片 ...
Layui学习二
weixin_43843911的博客
06-16 243
layui-----布局 一、后台布局 layUi提供了一个更加方便，更加美观，更加完善的布局 <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header">头部</div> <div ...
layui项目知识点总结
runner_123的博客
12-10 684
1、input单选框——获取选中值和设置选中值 需求：修改数据段时候，需要先去取到用户类型，然后让单选框对应的值选中。 原生js获取选中值 & 设置选中值 //获取 if(document.getElementById("reserve_yes").checked){ reserve=yes; } else if(document.getElementById("reser...
Layui框架学习day1
最新发布
2301_81641896的博客
07-09 696
1. 准备工作。
layui基础学习
clisks的博客
04-06 2069
layui 部分学习参考 本文是对官方文档的部分归纳整理，仅供参考 1.简介 layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。 其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。 layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面
Layui 学习笔记
weixin_36944798的博客
04-23 330
https://www.layui.com/doc/modules/element.html 网站设置 商品管理 订单管理 内容1 内容2 内容3 layui.use(‘element’, function(){ var element = layui.element; //一些事件监听 element.on(‘tab(d...
LayUi学习笔记
dingcai12003的博客
06-26 515
layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是...
掌握layui：基础界面设计与模块使用示例
总结而言，"layui的使用示例.zip" 通过一系列 HTML 文件和资源文件的演示，为前端开发者提供了一个快速学习和应用 layui 前端 UI 框架的途径。开发者可以从这些示例出发，结合实际项目需求，逐步掌握更多的 layui ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值