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

  1. .layui-input-sm,.layui-select-sm,.layui-textarea-sm
  2. {
  3. width:100px;
  4. height:25px;
  5. line-height:;
  6. border-width:1px;
  7. border-style:solid;
  8. background-color:#fff;
  9. border-radius:2px;
  10. border-color:#e6e6e6;
  11. padding-left: 5px;
  12. }
  13. .layui-form-item-sm .layui-input-inline-sm {
  14. float: left;
  15. width: 100px;
  16. margin-right: 5px;
  17. }
  18. .layui-input-inline-sm {
  19. display: inline-block;
  20. vertical-align: middle;
  21. position: relative;
  22. }
  23. .layui-form-label-sm {
  24. float: left;
  25. display: block;
  26. padding: 0px 8px;
  27. width: 60px;
  28. font-weight:;
  29. /* line-height: 24px; */
  30. text-align: right;
  31. position: relative;
  32. }
  33. .layui-card-header-sm {
  34. position: relative;
  35. /* height: 42px; */
  36. line-height: 28px;
  37. color: rgb(51, 51, 51);
  38. font-size: 14px;
  39. padding: 10px 15px;
  40. border-bottom: 1px solid rgb(246, 246, 246);
  41. border-radius: 2px 2px 0px 0px;
  42. }
  43.  
  44. .layui-select-title > input {
  45. width:100px;
  46. height:25px;
  47. line-height:;
  48. border-width:1px;
  49. border-style:solid;
  50. background-color:#fff;
  51. border-radius:2px;
  52. border-color:#e6e6e6;
  53. padding-left: 5px;
  54. }
  55. .layui-pop-search {
  56. cursor: pointer
  57. }

2. 使用方法:

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

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

在from中使用:

注意点:

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

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

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

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

  1. <%@ 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. Python基础知识—sys模块初探

    有关Python解释器的信息 与所有其他模块一样,必须使用import语句导入sys模块,即import sys. sys模块提供有关Python解释器的常量,函数和方法.dir(系统)给出了可用常量 ...

  2. 解决linux环境mysql的sql语句严格区分大小写问题

    在Windows环境下,mysql数据库的sql语句是不区分字母大小写的,但是程序移植到linux环境中,就会造成某些大小写不一致的语句执行失败,解决方法如下: 首先打开/etc/mysql/my.c ...

  3. 你真的了解META-INF吗?

    你真的了解META-INF吗? 做过JAVA EE开发的工程师应该都知道在JAVA build出来的JAR或者WAR的顶层目录下有个META-INF文件夹吧,可是有多少人能够清楚说出这个文件夹到底是做 ...

  4. 什么是C++

    1.到底什么是C++ C++是一门面向对象的程序设计语言. 关键词:程序设计语言,面向对象 程序设计语言是用来书写计算机程序的语言,更形象的说,程序设计语言是用来和计算机“交流的语言.” 面向对象(o ...

  5. Mysql中大数据类型的存取

    标准SQL中提供了八种大数据类型 上面四种是针对字节数据(二进制字符串类型,主要存储图片.音频信息等),下面四种是针对字符数据(非二进制字符串类型,纯文本文件). MySql中不使用标准SQL中针对字 ...

  6. meta中minimal-ui属性

    <meta id="viewport" name="viewport" content="width=device-width, user-sc ...

  7. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

  8. CodeForces 456-C Boredom

    题目链接:CodeForces -456C Description Alex doesn't like boredom. That's why whenever he gets bored, he c ...

  9. 爬虫程序获取登录Cookie信息时遇到302,怎么处理

    最近要做个爬虫程序爬爬东西,先搞定登录授权这块,没得源代码,所以只能自行搞定了,按平时的直接发起HttpWebRequest(req)请求,带上用户名密码,好了,然后 HttpWebResponse ...

  10. Servlet(5)—ServletRequest接口和ServletResponse接口

    ServletRequest接口: 使用ServletRequest接口创建对象,用于使客户端请求信息对Servlet可用,创建的对象作为参数传递之Servlet的Service() ServletR ...