[前端组件]layui、bootstrap

最新推荐文章于 2024-03-27 09:59:47 发布
最新推荐文章于 2024-03-27 09:59:47 发布
阅读量449 收藏 1
点赞数
文章标签： bootstrap 前端 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44275351/article/details/131860036
版权

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

Layui

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

LayUI具有以下特点：

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

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

使用：

<!-- 引入 layui.js-->

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

<!-- 引入 layui.css -->

<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-verifyrequired必填项
phone手机号
email邮箱
url网址
number数字
date日期
identity身份证
自定义规则值		设置表单项的验证规则，支持单条或多条规则（多条用|分隔），如：
lay-verify="required"
lay-verify="required|email"
lay-verify="其他自定义规则值"
自定义规则的用法：#详见
注：2.8.3 版本中调整了内置规则，不再强制必填。
如需保留必填，可叠加 required 规则，如：
lay-verify="required|number"
lay-vertypetips吸附层
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);

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

 // 渲染，并获得实例对象
  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之间的任意数字，其它无效)

行云乱雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap&LayUI
Hello_zbs的博客
05-07 420
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...
Boostrap&LayUI
weixin_61399281的博客
04-16 1200
Boostrap 官网：http://getbootstrap.com/ 中文网：http://www.bootcss.com/ BootStrap 特点 1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。 2. 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设 计，12列格网，样式向导文档。 3. 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bo
推荐开源项目：Vue-Layui - 基于Vue.js和Layui的前端框架
最新发布
gitblog_00025的博客
03-27 445
推荐开源项目：Vue-Layui - 基于Vue.js和Layui的前端框架 项目地址:https://gitcode.com/kouchao/vue-layui 项目简介 Vue-Layui 是一个将流行的JavaScript组件库Layui与现代前端框架Vue.js结合的项目。它旨在为开发者提供一种在Vue应用中轻松集成和使用Layui组件的方法，使得开发人员可以在享受Vue的灵活性和强大的功...
layui框架学习（7：选项卡样式）
gc_2299的博客
02-19 1090
学习并记录layui框架中页面元素的选项卡相关样式设置方式。
jquery+bootstrap+layui前端框架三件套
08-03
本资源包含的"jQuery+Bootstrap+Layui"三件套是前端开发者常用的三大工具，分别针对JavaScript库、UI设计和组件化开发。 **jQuery：JavaScript的简化者** jQuery，版本1.9.1，是一个轻量级的JavaScript库，它的...
DHUStore:基于Spring，SpringMVC，Mybatis和前端layui，bootstrap的在线商城
05-14
该项目使用LayUI提供的后台框架来执行系统的后端体系结构，并使用大量的LayUI组件（例如一些小图标）来改善系统功能并美化界面。Bootstarp 系统使用Bootstrap提供HTML和CSS规范来优化前端界面。 用于使系统与多个...
thinkphp5-managementSystem:采用layui bootstrap thinkphp5.0通用后台管理系统
03-11
2. Layui：Layui是一款轻量级的前端组件库，它集成了丰富的UI组件，如表格、按钮、提示、表单等，提供了优雅的页面布局和响应式设计，使得开发出的后台界面美观且操作友好。 二、系统功能 1. 权限管理：权限管理是...
轻量级的layui框架后台模板bootstrap
08-05
4. **导航与菜单**：`nav_add.html`可能涉及到layui的导航和菜单组件，允许开发者自定义导航结构，同时与bootstrap的导航栏组件相结合，提供良好的用户体验。 5. **数据库操作**：`db_backup.html`和`db_reduction....
layui下拉多选,下拉选择多选
09-13
Layui 是一套采用自身模块规范编写的前端 UI 框架，它对 Bootstrap 进行了全面的汉化和组件优化，适用于后台管理、WebAPP 等领域。Layui 强调轻量级、易用性以及模块化，提供了包括表格、表单、按钮、弹窗等在内的...
Python-djangoadmin美化采用layui作为基本框架改写大部分页面
08-12
django admin 美化，采用layui 作为基本框架，改写大部分页面
jQuery+layui多选框选择和美化特效
12-30
jQuery+layui插件制作的checkbox多选框选择和美化特效，一款父级子级结构权限选择多选框功能，父级选中，子级全选，子级没有选中父级取消选中效果。
aui+mui+weui+layui+bootstrap多个ui框架
05-08
aui+mui+weui+layui+bootstrap多个ui框架，完整示例，学习和使用都很方便
layui弄一个好看的数据表格样式
weixin_45932157的博客
09-10 1892
主要代码： done: function (res, curr, count) { $('th').css({ 'background-color': '#262626', 'color': 'white', 'font-weight': '500' }); var that = this.elem.next(); res.data.
前端框架bootstrap和layui的区别有哪些
weixin_30270889的博客
06-20 4197
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi，小编我虽然不是专业的前端程序员，但是对于前端还是颇有研究，闲暇事情会经常研究各种前端框架的源码，一来可以借鉴优秀框架的思想，二来可以顺便学习可以提高自己，好了，不废话了。 先看百度Bootstrap的定义 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、...
前端框架bootstrap和layui有什么区别
lin123_00的博客
06-09 1765
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi，小编我虽然不是专业的前端程序员，但是对于前端还是颇有研究，闲暇事情会经常研究各种前端框架的源码，一来可以借鉴优秀框架的思想，二来可以顺便学习可以提高自己，好了，不废话了。 web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线） 先看百度Bootstrap的定义 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端
解决同时引入bootstrap样式与layui样式导致layui部分样式被覆盖的问题
知北行的博客
09-06 5299
问题1： 网页整体布局用的是bootstrap3的样式，但同时使用了layui的数据表格来进行表格数据的展示，导致layui的表格中的按钮字体颜色被bootstrap的样式覆盖。 错误样式如下图（操作栏的按钮图标）： 解决方法： 方法1：layui.table回调覆盖 在 layui 表格数据加载的回调方法中(table.render中的done()方法)，通过 jquery类选择器，重新设置其字体颜色： $(".layui-table-col-special a").addClass("barColor
MiniUI、Easyui、layui与Bootstrap对比
BUG之友的博客
12-02 2948
MiniUI、Easyui、layui与Bootstrap对比 最近要做一个后端的系统，boss让找个框架给他，顺道就写了一个这个。首先声明一下自己并不是专门做前端的不对的地方请评论指出，而且大多此文章以表格为中心进行说明的。 MiniUI 一个基于jquery 的框架，开发的界面功能都很丰富。它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。 使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工
bootstrap layui 等等都行
07-12
好的，既然您提到了Bootstrap和Layui这两个框架，我可以为您设计一个基于这两个框架的前端页面。 首先，我会使用Bootstrap来构建页面的整体布局和响应式设计，这样可以确保您的网店页面在不同设备上都能良好地展示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值