1. 新建以下sm样式,保存为layform_sm.css文件名,然后放到layuiadmin/layui/css/文件夹下面。

.layui-input-sm,.layui-select-sm,.layui-textarea-sm
{
width:100px;
height:25px;
line-height:;
border-width:1px;
border-style:solid;
background-color:#fff;
border-radius:2px;
border-color:#e6e6e6;
padding-left: 5px;
}
.layui-form-item-sm .layui-input-inline-sm {
float: left;
width: 100px;
margin-right: 5px;
}
.layui-input-inline-sm {
display: inline-block;
vertical-align: middle;
position: relative;
}
.layui-form-label-sm {
float: left;
display: block;
padding: 0px 8px;
width: 60px;
font-weight:;
/* line-height: 24px; */
text-align: right;
position: relative;
}
.layui-card-header-sm {
position: relative;
/* height: 42px; */
line-height: 28px;
color: rgb(51, 51, 51);
font-size: 14px;
padding: 10px 15px;
border-bottom: 1px solid rgb(246, 246, 246);
border-radius: 2px 2px 0px 0px;
} .layui-select-title > input {
width:100px;
height:25px;
line-height:;
border-width:1px;
border-style:solid;
background-color:#fff;
border-radius:2px;
border-color:#e6e6e6;
padding-left: 5px;
}
.layui-pop-search {
cursor: pointer
}

2. 使用方法:

将小表单样式放后面引入。

<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all" rel="Stylesheet" />
<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layform_sm.css" media="all" rel="Stylesheet" />

在from中使用:

注意点:

单个页面中只能使用某一种样式。即如果使用表单小样式,就不能使用原来样式。

我这边使用当是iframe框架当,基本能满足这个条件。当使用表单小样式时,引入当文件是

<%@ include file="/WEB-INF/page/commons/common_layuiadmin_sm.jsp"%>

当使用正常大小时,引入文件是

<%@ include file="/WEB-INF/page/commons/common_layuiadmin.jsp"%>

这两个文件一个包含layform_sm.css,一个不包含而已。

3. 样式对比:

修改前的表单样式如下:

每行才允许3个字段,对于大量查询条件的系统来说,并不友好。边距普遍偏大。

修改后的表单样式如下:

layui form表单自定义sm格式的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. form表单内容JSON格式转化

    form表单提交时,对于Content-type为application/json是提交时需要转换成json格式,据说form enctype=‘application/json’这样就可以,然而在我 ...

  3. 避免layui form表单重复触发submit绑定事件

    个人博客 地址:http://www.wenhaofan.com/article/20180927002336 在使用以下代码监听lay-filter为editConfig的提交按钮后,当点击提交按钮 ...

  4. Layui form表单提交注意事项

    // 表单提交form.on('submit(first1)', function (data) { var articleFrom = data.field; $.ajax({ type:" ...

  5. js Form表单转json格式,及后台接收(多种方法)

    转载:https://blog.csdn.net/qq_40138785/article/details/81533015 一.serialize()方法格式:var data = $("# ...

  6. JS的Form表单转JSON格式

    一.serialize()方法 格式:var data = $("#formID").serialize(); 功能:将表单内容序列化成一个字符串. 注意:要使用params = ...

  7. layui form表单提交

    layui.use(['form'], function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function ...

  8. easyui form表单提交标准格式

    $("#temForm").form('submit', { url: '', queryParams: {}, cache: false, type: 'POST', dataT ...

  9. layUI form表单 防止多次点击重复提交

    //监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...

随机推荐

  1. [jzoj]1417.数学题

    Link https://jzoj.net/senior/#main/show/1417 Problem 当Alice在浏览数学书时,看到一个等式A=S,奇怪的是A和S并不相等.Alice发现可以通过 ...

  2. Redis 数据变化通知服务实践

    从Redis 2.8.0版本起,Redis加入了“Keyspace notifications”(即“键空间通知”)的功能.键空间通知,允许Redis客户端从“发布/订阅”通道中建立订阅关系,以便客户 ...

  3. YIi url美化

    一.Yii Url美化,配置urlManager组件 'urlManager' => [ 'enablePrettyUrl' => true, // 开启URL美化,可以去掉 index. ...

  4. Mac使用Clion配置OpenGL

    Mac使用Clion配置OpenGL 之前博主是用Xcode配置的openGL,但后来因为要与非Mac队友合作,于是大家决定统一使用Clion,博主于是再次配置开发环境,这里记录一下 预先准备 Mac ...

  5. 基于Python Pillow库生成随机验证码

    from PIL import Image from PIL import ImageDraw from PIL import ImageFont import random class ValidC ...

  6. PAT Basic 1020

    1020 月饼 (25 分) 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意 ...

  7. hihocoder1696 折线中点(几何)

    https://hihocoder.com/problemset/problem/1696 求折线中点,一开始想成先求横坐标中点了,肯定是错的. 一定要从线段长度求中点,然后中点公式推了好久.. #i ...

  8. .Net core下的配置设置(一)——Configuration

    ASP.NET Core 中提供了一个Configuration 包,用以应用配置基于配置提供程序建立的键值对.这里以json文件配置的方式,简单的介绍一下它的用法. 首先定义一个配置文件appset ...

  9. 前端工程化系列[02]-Grunt构建工具的基本使用

    本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...

  10. php 通过 create user 和grant 命令无法创建数据库用户和授权的解决办法

    php 通过 create user 和grant 命令无法创建数据库用户和授权的解决办法 解决办法, 通过 insert 命令的方式进行创建. 创建数据库用户: $sql= "insert ...