[前端组件]layui、bootstrap

Java网站一些常用的前端UI，可以美化我们的前端页面，常见的有Layui和Bootstrap。

行云乱雨

899人浏览 · 2023-10-06 19:48:55

行云乱雨 · 2023-10-06 19:48:55 发布

Java网站一些常用的前端UI，可以美化我们的前端页面，常见的有Layui和Bootstrap

Layui

是一个基于JavaScript的UI框架，旨在简化Web界面开发的过程，提供了丰富的CSS组件和JavaScript交互插件，使开发者能够快速构建出美观、灵活的网页界面。

LayUI具有以下特点：

简洁易用：LayUI提供了简单明了的API文档和丰富的示例，使开发者能够快速上手使用。
响应式设计：LayUI的组件都经过精心设计，能够自动适应不同屏幕大小和设备。
模块化开发：LayUI采用了模块化的开发思想，开发者可以按需加载需要的模块，减少资源浪费。
多种主题风格：LayUI提供了多种主题风格可供选择，开发者可以根据需要自由切换风格。
支持扩展：LayUI还提供了丰富的扩展组件和插件，开发者可以根据需要灵活扩展功能。

官网：Layui - 极简模块化前端 UI 组件库

使用：

<script src="/layui/layui.js"></script>



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

Layuicss

首先引入layui的css样式库，然后就可以在需要的class里添加想要的样式属性即可。

颜色

赤色：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"

按钮

<div class="layui-btn-container">  
 <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
 <button type="button" class="layui-btn">默认按钮</button>
 <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
 <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
</div> 
 
<div class="layui-btn-container">
 <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
 <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
 <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
</div>
 
<div class="layui-btn-container">
 <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
 <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
 <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
</div>
 
<div style="width: 380px;">
 <button type="button" class="layui-btn layui-btn-fluid">流体按钮（宽度自适应）</button>
</div>

图标

通过对一个内联元素（如 <i>标签）添加基础类 class="layui-icon" 来定义一个图标，然后对元素加上图标对应的 font-class。

layui提供了186个图标，格式都是：layui-icon-xxx

跨域处理

由于浏览器存在同源策略，若 Layui 文件地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。因此，要么将 Layui 文件与网站放在同一服务器，要么对 Layui 文件所在的静态资源服务器的 Response Headers 添加：Access-Control-Allow-Origin: * 或对跨资源共享指定域名，即可解决图标跨域问题。

动画

对需要动画的标签添加 class="layui-anim" 基础类，再追加其他不同的动画类data-anim，即可让元素产生动画

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-row ws-docs-anim">
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
    <div>layui-anim-down</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
    <div>layui-anim-up</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
    <div>layui-anim-downbit</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
    <div>layui-anim-upbit</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
    <div>layui-anim-scale</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
    <div>layui-anim-scaleSpring</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
    <div>layui-anim-scalesmall</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
    <div>layui-anim-scalesmall-spring</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
    <div>layui-anim-fadein</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
    <div>layui-anim-fadeout</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-rotate">360 度旋转</div>
    <div>layui-anim-rotate</div>
  </div>
  <div class="layui-col-sm3">
    <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
    <div>追加：layui-anim-loop</div>
  </div>
</div>
<script>
layui.use(function(){
  var $ = layui.$;
  
  //演示动画
  $('.ws-docs-anim .layui-anim').on('click', function(){
    var othis = $(this), anim = othis.data('anim');
 
    //停止循环
    if(othis.hasClass('layui-anim-loop')){
      return othis.removeClass(anim);
    }
    
    othis.removeClass(anim);
    
    setTimeout(function(){
      othis.addClass(anim);
    });
    //恢复渐隐
    if(anim === 'layui-anim-fadeout'){
      setTimeout(function(){
        othis.removeClass(anim);
      }, 1300);
    }
  });
});
</script>

</body>
</html>

表单

通过 class="layui-form" 定义一个表单域，通常设置在<form>标签上，或普通<div> 标签亦可。
通过 class="layui-form-item" 定义一个块级元素的表单项容器
通过 class="layui-form-label" 定义标签
通过 class="layui-input-block" 定义表单项父容器为块级元素
通过 class="layui-input-inline" 或 class="layui-inline" 定义表单项父容器为行内块元素

即必须按照规定的层级定义相应的 class。

输入框

class="layui-input"

输入框点缀

是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀。

<div class="layui-input-{容器类}">
  <div class="layui-input-{前缀类}"></div>
  <input class="layui-input" placeholder="输入框">
  <div class="layui-input-{后缀类}"></div>
</div>

容器类：
- 前置和后置结构：class="layui-input-group"
- 前缀和后缀结构：class="layui-input-wrap"
前缀类：class="layui-input-prefix"
后缀类：class="layui-input-suffix"
前缀显示分隔框：class="layui-input-prefix layui-input-split"
后缀显示分隔框：class="layui-input-suffix layui-input-split"

通过在不同层级中设置规定的 CSS 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容。

前置和后置结构是输入框的自适应结构，可以很灵活地控制前后置内容与输入框的宽度比例。
输入框前缀和后缀是输入框的纯修饰结构，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身。

动态点缀(2.8+)

点缀	属性值
数字输入框 2.8.9+	`lay-affix="number"`
密码框显隐	`lay-affix="eye"`
内容清除	`lay-affix="clear"`
自定义动态点缀	`lay-affix="customName"`

选择框

<div class="layui-col-md6">
    <select>
      <option value="">请选择</option>
      <option value="CCC" selected>选项 A</option>
      <option value="BBB">选项 B</option>
      <option value="BBB" disabled>选项 C（禁用选项）</option>
    </select>
  </div>

若第一项 value 为空，通常只作为选择框提示性引导；若第一项 value 不为空，则作为默认选中项。
通过给选项添加 selected 属性优先设置默认选中项。
通过给 <select> 或 <option> 标签设置 disabled 可禁用整个选择框或某个选项。

分组选择框

通过 <optgroup> 标签给选择框分组

<div class="layui-form">
  <select>
    <option value="">请选择</option>
    <optgroup label="分组 A">
      <option value="A-1">选项 A-1</option>
      <option value="A-2">选项 A-2</option>
      <option value="A-3">选项 A-3</option>
    </optgroup>
    <optgroup label="分组 B">
      <option value="B-1">选项 B-1</option>
      <option value="B-2">选项 B-2</option>
    </optgroup>
  </select>
</div>

搜索选择框

在 <select> 元素上设置 lay-search 可开启选择框的搜索功能

select中的lay-search这个属性,必须在layui-form标签中才可以生效。

layui-search="cs"是区分大小写

<div class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md6">
    <select lay-search="">
      <option value="">请选择或搜索（默认不区分大小写）</option>
      <option value="1">AAA</option>
      <option value="2">aaa</option>
      <option value="5">ABC</option>
      <option value="6">abc</option>
      <option value="7">AbC</option>
    </select>
  </div>
</div>

复选框

<div class="layui-form">
  <input type="checkbox" name="AAA" title="默认">
  <input type="checkbox" name="BBB" lay-text="选中" checked> 
  <input type="checkbox" name="CCC" title="禁用" disabled> 
  <input type="checkbox" name="DDD" title="半选" id="ID-checkbox-ind"> 
</div>

属性 title 可设置复选框标题
属性 checked 可设置默认选中
属性 disabled 可设置禁用状态
属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）
属性 lay-skin 可设置复选框风格，可选值：tag2.8+,switch，默认风格可不填

特别地，当表单提交时，只有选中状态的复选框才能获取到 value，这点和浏览器原有的复选框机制相同。

开关风格

<div class="layui-form">
  <input type="checkbox" name="AAA" lay-skin="switch">
  <br>
  <input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked> 
  <br>
  <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
  <br>
  <input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>

在 title 属性中通过 | 分隔符可设置两种状态下的不同标题

在 checkbox 元素后的相邻元素设置特定属性 lay-checkbox，可以与 checkbox 标题进行绑定。

单选框

<div class="layui-form">
  <input type="radio" name="AAA" value="1" title="默认">
  <input type="radio" name="AAA" value="2" title="选中" checked> 
  <input type="radio" name="AAA" value="3" title="禁用" disabled> 
</div>

属性 title 可设置单选框标题
属性 checked 可设置默认选中
属性 disabled 可设置禁用状态
属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）。同组单选框一般设置相同值

在 radio 元素后的相邻元素设置特定属性 lay-radio，可以与 radio 标题进行绑定。

通过 class="layui-nav" 设置导航容器
通过 class="layui-nav-item" 设置导航菜单项
- 追加 className 为 layui-this 可设置菜单选中项
通过 class="layui-nav-child" 设置导航子菜单项
- 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐

垂直导航

一般用于左侧侧边菜单。样式规则如下：

在水平导航的 class 规则上，通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。
通过 class="layui-nav-itemed" 设置父菜单项为展开状态
通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航
其余结构及填充内容与水平导航完全相同

Layuijs

注意：layui在thymeleaf页面使用二维数组时会有冲突

解决：1.<script th:inline="none"> 2.数组的两个[]之间打空格

是因为 Layer 组件期望 content 参数是一个 DOM 元素或一个 HTML 字符串，而不是一个 JavaScript 对象。当你将一个 DOM 元素对象作为 content 参数传递给 Layer 组件时，它会尝试调用 parents 方法，但是由于 content 是一个 DOM 元素对象，而非 jQuery 对象，所以没有 parents 方法可用，导致报错。而当你将 type 参数设置为 2 时，意味着你打开的是一个 iframe 层，content 参数需要是一个有效的页面 URL。在这种情况下，传递一个 DOM 元素对象不会触发 parents 方法的调用，因此不会报错。为了解决报错问题，你需要确保在 type 参数为 1 的情况下，content 参数是一个正确的 HTML 字符串，或者使用 jQuery 对象来包装 content 参数。

核心API

API	描述
layui.cache	获得 UI 的一些配置及临时缓存信息
layui.config(options)	基础配置。#用法
layui.define([modules], callback)	定义模块。#用法
layui.use([modules], callback)	加载模块。#用法
layui.extend(obj)	扩展模块。#用法
layui.disuse([modules]) 2.7+	弃用模块，以便重新扩展新的同名模块。参数支持数组，即可同时弃用多个模块。如：`layui.disuse(['table'])`
layui.link(href)	加载 CSS，`href` 即为 css 路径。一般用于动态加载你的外部 CSS 文件
layui.getStyle(node, name)	获得一个原始 DOM 节点的 style 属性值，如： `layui.getStyle(document.body, 'font-size')`
layui.img(src, callback, error)	图片预加载
layui.each(obj, callback)	对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句
layui.type(operand) 2.6.7+	获取基本数据类型和各类常见引用类型，如： `layui.type([]); // array` `layui.type({}); //object` `layui.type(new Date()); // date`
layui.isArray(obj) 2.7+	对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等 `layui.isArray([1,6]); // true` `layui.isArray($('div')); // true`
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序，如：`layui.sort([{a: 3},{a: 1},{a: 5}], 'a'); // 返回：[{"a":1},{"a":3},{"a":5}]`
layui.url(href)	链接解析。#用法
layui.data(table, settings)	持久化存储。#用法
layui.sessionData(table, settings)	会话性存储。#用法
layui.device(key)	获取浏览器信息。#用法
layui.hint()	向控制台打印一些异常信息，目前只返回了 error 方法，如： `var hint = layui.hint();` `hint.error('出错啦');`
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	增加自定义模块事件，一般在内置组件中使用。
layui.event(modName, events, params)	执行自定义模块事件，搭配 onevent 使用。注2.8+：当 events 参数中未设定 filter 时则可重复执行该事件，否则只会执行一次最新添加的事件。
layui.off(events, modName) 2.5.7+	用于移除模块相关事件，如：`layui.off('select(filter)', 'form')`，那么`form.on('select(filter)', callback)`事件将会被移除
layui.debounce(fn, wait) 2.8.3+	防抖，函数按指定毫秒延时执行
layui.throttle(fn, wait) 2.8.3+	节流，限制函数在指定毫秒内不重复执行
layui.factory(modName)	用于获取模块对应的 `layui.define()` 的回调函数
var lay = layui.lay	基础模块，提供了更多基础 API，一般供 Layui 内置组件中使用
var $ = layui.$;	使用jQuery，layui内置了jQuery

底层方法

全局配置

layui.config(options);

在 Layui 模块使用之前，采用该方法进行一些全局化的基础配置

layui.config({
  base: '', // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
  version: false, // 用于更新模块缓存，默认 false。
//version若设为 true，即让浏览器不缓存。也可设为一个任意数值
  dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。
//dir一般无需设置
  debug: false // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
});

链接解析

var url = layui.url(href);

参数 href 可选，默认自动读取当前页面 URL（location.href）。该方法用于将一段 URL 链接中的 pathname、search、hash 等属性进行对象化处理

// 假设当前页面 url 为： https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/
var url = layui.url();
 
// url 返回结果为：
{
  "pathname": ["docs","base.html"], // 路径
  "search": {"a":"1","c":"3"}, // 参数
  "hash": { // hash 解析
    "path": ["user","set",""], // hash 中的路径
    "search": {"id":"123"}, // hash 中的参数
    "hash": "",  // hash 中的 hash
    "href": "/user/set/id=123/"  // hash 中的完整链接
  }
}

本地存储

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。方法如下：

layui.data(table, settings); 即 localStorage，数据在浏览器中的持久化存储，除非物理删除。
layui.sessionData(table, settings); 即 sessionStorage ，数据在浏览器中的会话性存储，页面关闭后即失效。

两者使用方式完全一致。其中参数 table 为表名，settings 是一个对象，用于设置 key/value。下面以 layui.data()

// 【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
layui.data('test', {
  key: 'nickname',
  value: '张三'
});
 
// 【删】：删除 test 表的 nickname 字段
layui.data('test', {
  key: 'nickname',
  remove: true
});
layui.data('test', null); // 删除 test 表
  
// 【改】：同【增】，会覆盖已经存储的数据
// 【查】：向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); // 获得“张三”

浏览器信息

var device = layui.device(key);

参数 key 可选。可利用该方法对不同的设备进行差异化处理，device 即为不同设备下返回的不同信息

{
  os: "windows", // 当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等
  ie: false, // 当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false
  weixin: false, // 当前浏览器是否为微信 App 环境
  android: false, // 当前浏览器是否为安卓系统环境
  ios: false, // 当前浏览器是否为 IOS 系统环境
  mobile: false // 当前浏览器是否为移动设备环境（v2.5.7 新增）
}

模块系统

Layui 制定了一套适合自身应用场景的轻量级模块规范，以便在不同规模的项目中，也能对前端代码进行很好的管理或维护。 Layui 的轻量级模块系统，并非有意违背 CommonJS 和 ES Module ，而是试图以更简单的方式去诠释高效，这种对返璞归真的执念源于在主流标准尚未完全普及的前 ES5 时代，后来也成为 Layui 独特的表达方式，而沿用至今。

定义模块

layui.define([mods], callback);

参数 mods 可选，用于声明该模块所依赖的模块；
参数 callback 即为模块加载完毕的回调函数，它返回一个 exports 参数，用于输出该模块的接口

layui.define(['layer', 'laydate'], function(exports){
  var layer = layui.layer // 获得 layer 模块
  var laydate = layui.laydate; // 获得 laydate 模块
  
  // 输出模块
  exports('demo', {}); // 模块名 demo 未被占用，此时模块定义成功
  // exports('layer', {}); // 模块名 layer 已经存在，此时模块定义失败
});

使用模块

layui.use([mods], callback);

参数 mods 若填写，必须是已被成功定义的模块名；
若 mods 不填，即只传一个 callback 参数时，则表示引用所有内置模块。
参数 callback 即为使用模块成功后回调函数。
该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作

// 使用指定模块
layui.use(['layer', 'table'], function(){
  var layer = layui.layer;
  var table = layui.table;
  
  // do something
});
 
// 使用所有内置模块（layui v2.6 开始支持）
layui.use(function(){
  var layer = layui.layer;
  var table = layui.table;
  var laydate = layui.laydate;

  // do something
});

//你还可以通过 callback 返回的参数得到模块对象
layui.use(['layer', 'table'], function(layer, table){
  // 使用 layer
  layer.msg('test');
  
  // 使用 table
  table.render({});
});

/*
重新获取定义模块时的 callback 函数, 譬如在单页面应用开发中，
我们在视图碎片中使用某个模块，由于定义模块时的 callback 
只会在模块初次加载中被调用，而当视图碎片在每次被渲染时，又往往需要该 callback 
被再次执行，那么则可以通过以下方式实现
*/
// 在单页面视图碎片渲染时，再次调用「定义模块」时的 `callback`
layui.use('demo', layui.factory('demo'));

扩展模块

扩展模块是项目开发的重要环节，它既可以是工具性组件，也可以是纯业务组件，是 Layui 的延伸，也是项目的支撑。

layui.extend(obj);

参数 obj 是一个对象，必选，用于声明模块别名。

除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）

1.创建模块

新建一个未被定义过的模块名 firstMod.js 文件并放入项目的任意目录中（最好不要放入到 Layui 原始目录）

2.编写模块

编写firstMod.js该模块主体代码

/**
 * 编写一个 firstMod 模块
 **/
layui.define(function(exports){ // 也可以依赖其他模块
  var obj = {
    hello: function(str){
      alert('Hello '+ (str || 'firstMod'));
    }
  };
  
  // 输出 firstMod 接口
  exports('firstMod', obj);
});

3.声明模块

声明模块名及模块文件路径，即完成模块扩展

// 假设 firstMod 模块文件所在路径在： /js/layui_exts/firstMod.js
layui.config({
  base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录
}).extend({
  firstMod: 'firstMod', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径
  // mod2: 'mod2' // 可同时声明其他更多模块
});
 
// 也可以不继承  layui.config 的 base 路径，即单独指定路径
layui.extend({
  firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径
});
 
// 然后我们就可以像使用内置模块一样使用扩展模块
layui.use(['firstMod'], function(){
  var firstMod = layui.firstMod;
  
  firstMod.hello('World');
});

建立模块入口

在不同的页面中，可能需要用到不同的业务模块。当项目存在许多不同的业务模块（且存在一定的依赖关系），我们又希望在页面中建立统一的入口模块，我们可以将上述模块合并为一个文件来加载，即借助构建工具（如 Gulp）将多个业务模块合并到一个模块文件：index.js，此时只需在页面统一加载该模块即可。这样我们最多只需要加载两个 JS 文件：layui.js、index.js，这将大幅度减少静态资源的请求

<script src="/js/layui/layui.js"></script> 
<script>
layui.config({
  base: '/js/modules/' // 业务模块所在目录
}).use('index'); // 加载当前页面需要的业务模块
</script>

表单JS

API	描述
var form = layui.form	获得 `form` 模块。
form.render(type, filter)	表单域组件渲染，核心方法。#用法
form.verify(obj)	自定义表单验证的规则。#用法
form.validate(elem) 2.7+	主动触发执行验证。#用法
form.val(filter, obj)	表单赋值或取值。 #用法
form.submit(filter, callback) 2.7+	用于主动执行指定表单的提交。#用法
form.on('event(filter)', callback)	事件。#用法
form.set(options)	设置 form 组件全局配置项。
form.config	获取 form 组件全局配置项。

属性

在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 lay-* 为命名格式

属性	值	描述
title	自定义	设置表单元素标题，一般用于 `checkbox,radio` 元素
lay-filter	自定义	设置表单元素的过滤器，以便用于执行相关方法时的参数匹配
lay-verify	`required`必填项 `phone`手机号 `email`邮箱 `url`网址 `number`数字 `date`日期 `identity`身份证 `自定义规则值`	设置表单项的验证规则，支持单条或多条规则（多条用`\|`分隔），如： `lay-verify="required"` `lay-verify="required\|email"` `lay-verify="其他自定义规则值"` 自定义规则的用法：#详见注：2.8.3 版本中调整了内置规则，不再强制必填。如需保留必填，可叠加 `required` 规则，如： `lay-verify="required\|number"`
lay-vertype	`tips`吸附层 `alert` 对话框 `msg` 默认	设置验证异常时的提示层模式
lay-reqtext	自定义	设置必填项（`lay-verify="required"`）的默认提示文本
lay-affix	#详见	输入框动态点缀，`<input type="text">`元素私有属性
lay-skin	#详见	设置 UI 风格。 `<input type="checkbox">` 元素私有属性
lay-search	默认不区分大小写; 设置`cs`区分大小写	给 `select` 组件开启搜索功能。`<select>` 元素私有属性
lay-submit	无需值	设置元素(一般为`<button>` 的属性：lay-submit)触发 `submit` 提交事件
lay-ignore	无需值	设置表单元素忽略渲染，即让元素保留系统原始 UI 风格

渲染

form.render(type, filter);

参数 type 可选，对应表单组件类型，支持：input,select,checkbox,radio；若不填，则指向所有类型。
参数 filter 可选，对应 class="layui-form" 所在元素的 lay-filter 属性值，用于指定需渲染的表单区域

常规渲染

form 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对动态插入的表单元素的渲染

<script>
layui.use(function(){
  var form = layui.form;
  // 当表单元素被插入插入时，需进行组件渲染才能显示
  form.render(); // 渲染全部表单
  form.render('select'); // 仅渲染 select 元素
  form.render(null, 'test'); // 仅渲染 lay-filter="test" 的容器内的全部表单
  form.render('checkbox', 'test'); // 仅渲染  lay-filter="test"的容器内的checkbox元素
})
</script>

定向渲染 2.7+

定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用。指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：

若 jQuery 对象指向表单域容器（class="layui-form"），则渲染该表单域中的所有表单项；2.8+
若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染

<script> 
layui.use('form', function(){
  var $ = layui.$;
  var form = layui.form;
  
  // 定向渲染（一般当表单存在动态生成时，进行渲染）
  // 传入需要渲染的相应表单元素的 jQuery 对象 
  form.render($('#form-id')); // 渲染 id="form-id" 的表单域中的所有表单项
  form.render($('#select-id')); // 仅渲染 id="select-id" 的表单项
});
</script>

点缀事件

form.on('input-affix(filter)', callback);

input-affix 为输入框动态点缀事件固定名称
filter 为输入框对应的 lay-filter 属性值

form.on('input-affix(filter)', function(data){
  var elem = data.elem; // 获取输入框 DOM 对象
  var affix = data.affix; // 获取输入框 lay-affix 属性值
  console.log(this); // 当前触发点缀事件的图标元素
});

复选框事件

风格	事件
默认风格 / 标签风格	`form.on('checkbox(filter)', callback);`
开关风格	`form.on('switch(filter)', callback);`

checkbox 和 switch 为复选框事件固定名称
filter 为复选框元素对应的 lay-filter 属性值

该事件在复选框选中或取消选中时触发

表格JS

API	描述
var table = layui.table	获得 `table` 模块。
table.set(options)	设定全局默认属性项。
table.render(options)	table 组件渲染，核心方法。
table.init(filter, options)	初始化渲染静态表格。
table.reload(id, options, deep)	表格完整重载。
table.reloadData(id, options, deep) 2.7+	表格数据重载。
table.renderData(id) 2.8.5+	重新渲染数据。
table.checkStatus(id)	获取选中行相关数据。
table.setRowChecked(id, opts) 2.8+	设置行选中状态。
table.getData(id)	获取当前页所有行表格数据。
table.cache	获取表格缓存数据集（包含特定字段）。
table.resize(id)	重置表格尺寸。
table.exportFile(id, data, opts)	导出表格数据到本地文件。
table.getOptions(id) 2.8+	获取表格实例配置项。
table.hideCol(id, cols) 2.8+	设置表格列的显示隐藏属性。
table.on('event(filter)', callback)	table 相关事件。

修改表格日期格式：


 {field: 'dateStart', width: '18%',templet: function (d) {
                        if (d.dateStart && d.dateStart !== '' && 
d.dateStart !== null ) {
                            return layui.util.toDateString(
d.dateStart, 'yyyy:MM:dd HH:mm:ss')
                        } else {
                            return '';
                        }
                    }
                },

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式	描述
方法配置渲染	通过 table 组件提供的核心方法 `table.render(options)` 完成的渲染。推荐
模板配置渲染	通过 `<table>` 标签的 `lay-options="{}"` 属性定义模板，组件自动对其进行解析并完成渲染。
静态表格渲染	对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。

方法配置渲染

table.render(options);

参数 options : 基础属性配置项。#详见属性

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

 // 渲染，并获得实例对象
  var inst = table.render({
    elem: '#test', // 绑定元素选择器
    // 其他属性
    // …
  });

模板配置渲染

在 <table> 元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染

静态表格渲染

table.init(filter, options);

参数 filter : <table> 元素对应的 lay-filter 属性值
参数 options : 基础属性配置项。#详见属性

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。#参考相关示例

分页JS

API	描述
var laypage = layui.laypage	获得 `laypage` 模块。
laypage.render(options)	laypage 组件渲染，核心方法。

属性名	描述	类型	默认值
elem	绑定分页容器。值可以是容器 `id` 或 DOM 对象。如： `elem: 'id'` 注意：这里不能加 `#` 号 `elem: document.getElementById('id')`	string DOM	-
count	数据总数。一般通过后端得到	number	-
limit	每页显示的条数。	number	`10`
limits	每页条数的选择项。若 `layout` 参数开启了 `limit` ，则会出现每页条数的 select 选择框	array	`[10,…,50]`
curr	初始化当前页码。	number	`1`
groups	连续出现的页码数量	number	`5`
prev	自定义“上一页”的内容，支持传入普通文本和 HTML	string	`上一页`
next	自定义“下一页”的内容，用法同上。	string	`下一页`
first	自定义“首页”的内容，用法同上。	string	`1`
last	自定义“尾页”的内容，用法同上。	string	自动获得
layout	自定义分页功能区域排版。可自由排列，可选值有： `count` 数据总数区域 `prev` 上一页区域 `page` 分页区域 `next` 下一页区 `limit` 条目选项区域 `refresh` 页面刷新区 `skip` 快捷跳页区	array	查看默认值
theme	自定义主题。支持传入：颜色值或任意普通字符。如： `theme: '#c00'` 直接设置当前页按钮背景色 `theme: 'xxx'` 会生成 `class="layui-laypage-xxx"` 的 CSS 类，以便自定义主题	string	-
hash	设置 `hash` 名称。设置该属性后，点击分页将会自动对当前 `url` 追加：`#{hash}={curr}`，从而在页面刷新时初始化当前页码。#详细用法参考示例	string	-
回调函数
jump	分页跳转后的回调函数。函数返回两个参数：参数 `obj` : 当前分页相关的所有选项值参数 `first` : 是否首次渲染，一般用于初始加载的判断 `laypage.render({` `elem: 'id',` `count: 70, // 数据总数，从后端得到` `jump: function(obj, first){` `console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。` `console.log(obj.limit); // 得到每页显示的条数` `// 首次不执行` `if(!first){` `// do something` `}` `}` `});`

弹出层JS

API	描述
var layer = layui.layer	获得 `layer` 模块。
弹出 :	-
layer.open(options)	打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装
layer.alert(content, options, yes)	弹出 `dialog` 类型信息框。
layer.confirm(content, options, yes, cancel)	弹出 `dialog` 类型询问框。
layer.msg(content, options, end)	弹出 `dialog` 类型提示框。
layer.load(icon, options)	弹出 `loading` 类型加载层。
layer.tips(content, elem, options)	弹出 `tips` 类型贴士层。
layer.prompt(options, yes)	弹出 `page` 类型输入框层。
layer.photos(options)	弹出 `page` 类型图片层。
layer.tab(options)	弹出 `page` 类型标签页层。
关闭 :	-
layer.close(index)	关闭对应的层，核心方法。
layer.closeAll(type)	关闭所有对应类型的层。
layer.closeLast(type) 2.8+	关闭最近打开的对应类型的层。
其他 :	-
layer.config(options)	全局配置默认属性。
layer.ready(callback)	样式初始化就绪。
layer.style(index, css)	重新设置弹层样式。
layer.title(title, index)	设置弹层的标题。
layer.getChildFrame(selector, index)	获取 iframe 页中的元素。
layer.getFrameIndex(window.name)	在 iframe 页中获取弹层索引。
layer.iframeAuto(index)	设置 iframe 层高度自适应。
layer.iframeSrc(index, url)	重新设置 iframe 层 URL。
layer.index	获取最新弹出层的索引
layer.zIndex	获取最新弹出层的层叠顺序
layer.setTop(layero)	将对应弹层的层叠顺序为置顶。
layer.full(index)	设置弹层最大化尺寸。
layer.min(index)	设置弹层最小化尺寸。
layer.restore(index)	还原弹层尺寸。

属性名	描述	类型	默认值
type	弹层类型。可选值有： `0` dialog 信息框（默认），同时只能存在一个层 `1` page 页面层，可同时存在多个层 `2` iframe 内联框架层，可同时存在多个层 `3` loading 加载层，同时只能存在一个层 `4` tips 贴士层，可配置同时存在多个层 `layer` 弹层由以上 5 种类型构成。不同的类型代表不同的弹出形态，`layer` 提供的所有的弹出方式均由此衍生。	number	`0`
title	弹层标题。其值支持以下可选类型：若为 `string` 类型 : 则表示为弹层的标题文本，如： `title: '标题'` 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式： `title: ['标题', 'font-size: 18px;']` 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。 `title: false // 不显示标题栏`	string array boolean	`信息`
content	弹层内容。可传入的值比较灵活，支持以下使用场景：若 `type: 1`（页面层）: 则 `content` 可传入值如下： `// 普通字符` `layer.open({` `type: 1,` `content: '传入任意文本或 HTML'` `});` `// 捕获页面已存在的 DOM 元素或 jQuery 对象` `layer.open({` `type: 1,` `content: $('#id') // 捕获层` `});` 注意：若采用捕获层，则捕获的元素必须存放在 `<body>` 根节点下，否则可能被父级容器的相对定位所影响。若 `type: 2`（iframe 层）: 则 `content` 可传入值如下： `// iframe URL` `layer.open({` `type: 2,` `content: 'http://cn.bing.com' // URL` `});` `// 是否屏蔽 iframe 滚动条` `layer.open({` `type: 2,` `// 数组第二个成员设为 no，即屏蔽 iframe 滚动条` `content: ['http://cn.bing.com', 'yes']` `});` 若为其他弹层类型，传入普通字符即可。相关效果可参考：#示例
area	设置弹层的宽高，其值支持以下可选类型：若为 `array` 类型，则可同时设置宽高 `area: ['520px', '320px']` 固定宽度和高度 `area: ['auto', '320px']` 宽度自动，高度固定 `area: ['520px', 'auto']` 宽度固定，高度自动若为 `string` 类型，则可定义宽度和宽高均自适应： `area: '520px'` 宽度固定，高度自适应 `area: 'auto'` 宽度和高度均自适应	array string	`auto`
maxWidth	弹层的最大宽度。当 `area` 属性值为默认的 `auto'` 时有效。	number	`360`
maxHeight	弹层的最大高度。当 `area` 属设置高度自适应时有效。	number	-
offset	弹层的偏移坐标。支持以下可选值： `offset: 'auto'` 坐标始终垂直水平居中 `offset: '16px'` 只设置垂直坐标，水平保持居中 `offset: ['16px', '16px']` 设置垂直和水平坐标 `offset: 't'` 上边缘 `offset: 'r'` 右边缘 `offset: 'b'` 下边缘 `offset: 'l'` 左边缘 `offset: 'rt'` 右上角 `offset: 'rb'` 右下角 `offset: 'lt'` 左上角 `offset: 'lb'` 左下角当设置边缘坐标时，可配合 `anim` 属性实现抽屉弹出效果。	string array	`auto`
anim	弹层的出场动画。支持以下可选值： `anim: 0` 平滑放大。默认 `anim: 1` 从上掉落 `anim: 2` 从最底部往上滑入 `anim: 3` 从左滑入 `anim: 4` 从左翻滚 `anim: 5` 渐显 `anim: 6` 抖动边缘抽屉动画 2.8+： `anim: 'slideDown'` 从上边缘往下 `anim: 'slideLeft'` 从右边缘往左 `anim: 'slideUp'` 从下边缘往上 `anim: 'slideRight'` 从左边缘往右抽屉动画一般配合 `offset` 属性实现边缘弹出。#详见示例	number string	`0`
isOutAnim	是否开启弹层关闭时的动画。	boolean	`true`
maxmin	是否开启标题栏的最大化和最小化图标。	boolean	`false`
closeBtn	是否开启标题栏的关闭图标，或设置关闭图标风格。 `closeBtn: 0` 不显示关闭图标 `closeBtn: 1` 关闭图标默认风格 `closeBtn: 2` 关闭图标风格二	number	`1`
icon	提示图标。信息框和加载层的私有参数。若为信息框，支持传入 `0-6` 的可选值。默认为 `-1`，即不显示图标。若为加载层，支持传入 `0-2` 的可选值 `// eg1` `layer.alert('成功提示', {icon: 1});` `// eg2` `layer.msg('开心表情', {icon: 6});` `// eg3` `layer.load(1); // 加载层风格一`	number	`-1`
btn	自定义按钮。页面层默认不开启。按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如： `// eg1` `layer.confirm('询问框？', {` `btn: ['按钮1', '按钮2', '按钮3']` `});` `// eg2` `layer.open({` `content: 'test',` `btn: ['按钮1', '按钮2', '按钮3'],` `// 按钮1 的回调` `btn1: function(index, layero, that){},` `btn2: function(index, layero, that){` `// 按钮2 的回调` `// return false // 点击该按钮后不关闭弹层` `},` `btn3: function(index, layero, that){` `// 按钮3 的回调` `// return false // 点击该按钮后不关闭弹层` `}` `});`	string	-
btnAlign	按钮水平对其方式。支持以下可选值： `btnAlign: 'l'` 按钮左对齐 `btnAlign: 'c'` 按钮水平居中对齐 `btnAlign: 'r'` 按钮右对齐。默认值，不用设置	string	`r`
skin	弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题： `layui-layer-molv` 墨绿主题 `layui-layer-lan` 深蓝主题 `layui-layer-win10` Windows 10 主题 2.8+ 还可传入其他任意 className 来自定义主题。参考：#示例	string	-
shade	弹层的遮罩。支持以下写法： `shade: 0.3` 设置遮罩深色背景的透明度 `shade: [0.3, '#FFF']` 设置遮罩透明度和颜色值 `shade: 0` 不显示遮罩	number array	`0.3`
shadeClose	是否点击遮罩时关闭弹层。当遮罩存在时有效。	boolean	`false`
id	弹层的唯一索引值。一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。	string	-
hideOnClose 2.8.3+	关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。若设为 `true`，则必须同时设置 `id` 属性方可有效。	boolean	`false`
time	弹层自动关闭所需的毫秒数。如 `time: 3000` ，即代表 3 秒后自动关闭。提示框、加载层、Tips 层三种弹出模式默认开启。	number	`0`
fixed	弹层是否固定定位，即始终显示在页面可视区域。	boolean	`true`
zIndex	弹层的初始层叠顺序值。	number	`19891014`
resize	是否允许拖拽弹层右下角拉伸尺寸。该属性对加载层和 tips 层无效。	boolean	`true`
scrollbar	打开弹层时，是否允许浏览器出现滚动条。	boolean	`true`
minStack 2.6+	点击标题栏的最小化时，是否从页面左下角堆叠排列。	boolean	`true`
removeFocus 2.8+	是否移除弹层触发元素的焦点，避免按回车键时重复弹出。	boolean	`true`
move	绑定弹层的拖拽元素。默认为触发弹层的标题栏进行拖拽。也可以设置 `move: false` 禁止拖拽。用法参考：#示例	string DOM boolean	-
moveOut	否允许拖拽到窗口外	boolean	`false`
tips	设置 tips 层的吸附位置和背景色，tips 层的私有属性。若为 `number` 类型，则支持 `1-4` 的可选值，分别代表上右下左的吸附位置。如： `tips: 1` 若为 `array` 类型，则支持设置吸附位置和背景色，如： `tips: [1, '#000'] // 吸附在上的深色贴士层`	number array	`2`
tipsMore	是否允许同时存在多个 tips 层，即不销毁上一个 tips。	boolean	`false`
回调函数
success	打开弹层成功后的回调函数。返回的参数如下： `layer.open({` `type: 1,` `content: '内容',` `success: function(layero, index, that){` `// 弹层的最外层元素的 jQuery 对象` `console.log(layero);` `// 弹层的索引值` `console.log(index);` `// 弹层内部原型链中的 this --- 2.8+` `console.log(that);` `}` `});`
yes	点击「确定」按钮的回调函数。返回的参数同 `success` `layer.open({` `content: '内容',` `yes: function(index, layero, that){` `// do something` `layer.close(index); // 关闭弹层` `}` `});`
cancel	点击标题栏关闭按钮的回调函数。返回的参数同 `success` `layer.open({` `content: '内容',` `cancel: function(index, layero, that){` `if(confirm('确定要关闭么')){` `layer.close(index);` `}` `return false; // 阻止默认关闭行为` `}` `});`
end	弹层被关闭且销毁后的回调函数。 `layer.open({` `content: '内容',` `end: function(){` `console.log('弹层已被移除');` `}` `});`
moveEnd	弹层拖拽完毕后的回调函数。 `layer.open({` `type: 1,` `content: '内容',` `moveEnd: function(layero){` `console.log('拖拽完毕');` `}` `});`
resizing	弹层拉伸过程中的回调函数 `layer.open({` `type: 1,` `content: '内容',` `resizing: function(layero){` `console.log('拉伸中');` `}` `});`
full	弹层最大化后的回调函数。返回的参数同 `success` `layer.open({` `type: 1,` `content: '内容',` `full: function(layero, index, that){` `console.log('弹层已最大化');` `}` `});`
min	弹层最小化后的回调函数。返回的参数同 `success` `layer.open({` `type: 1,` `content: '内容',` `min: function(layero, index, that){` `// do something` `// return false; // 阻止默认最小化` `}` `});`
restore	弹层被还原后的回调函数。返回的参数同 `success` `layer.open({` `type: 1,` `content: '内容',` `restore: function(layero, index, that){` `console.log('弹层已还原');` `}` `});`

第三方拓展

layui生态有很多第三方拓展组件：Layui 第三方扩展组件平台 (layuion.com)

Bootstrap

bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

响应式所具有的特点

网页的宽度自动调整
尽量少用绝对宽度
字体要使用 rem、em 做为单位
布局要使用浮动、弹性布局

官网：Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com)

中文文档：Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

进入中文文档->下载->下载Bootstrap生产文件

目录结构：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

使用：

低版本bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js要在 bootstrap.min.js 之前引入

<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script src="/js/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>

栅格系统

Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的强大的混合类，v5版本划分了6个响应区间
表示行的class: row
表示列的class：注：("*"可选：1-12之间的任意数字，其它无效)

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r