layui

嚴華  金牌会员 | 2022-8-9 14:48:05 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 673|帖子 673|积分 2019

LayUI

layui（谐音：类<form  action="">
</form>UI)<form  action="">
</form>是一套开源的Web<form  action="">
</form>UI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS<form  action="">
</form>的开发方式，常适合网页界面的快速开发。layui<form  action="">
</form>区别于那些基于MVVM<form  action="">
</form>底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。
LayUI的特点

1：layui属于轻量级框架，简单美观，适用于后端开发模式，它在服务端页面上有非常好的效果
2：layuu是提供给后端开发人员的ui框架，基于DOM驱动
LayUI

基本使用

1.下载layui
官网：https://layuion.com/
2.安装、引入依赖
例子：
  1. <!DOCTYPE<form  action="">
  2. </form>html>
  3. <html>
  4.         <head>
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.         <meta<form  action="">
  7. </form>charset="utf-8"<form  action="">
  8. </form>/>
  9.         <link rel="stylesheet" href="layui/css/layui.css"/>
  10.         <title></title>
  11.         <link rel="stylesheet" href="layui/css/layui.css"/>
  12.         <link<form  action="">
  13. </form>rel="stylesheet"<form  action="">
  14. </form>type="text/css"<form  action="">
  15. </form>href="layui/css/layui.css"/>
  16.         <link rel="stylesheet" href="layui/css/layui.css"/>
  17.        
  18.         </head>
  19.         <body>
  20.         <link rel="stylesheet" href="layui/css/layui.css"/>
  21.         <form  action="">
  22. </form>
  23.         </body>
  24. </html>
复制代码
需要声明使用的模块和回调函数，参照官方文档，选择自己想要的效果即可。
比如：
  1.         <form  action="">
  2. </form>
复制代码
页面元素

布局

1.固定宽度--两边有空白常用
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.                 固定宽度
  3.         <link rel="stylesheet" href="layui/css/layui.css"/>
  4.        
复制代码
2.完整宽度--占据宽度的100%
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.                 完整宽度
  3.         <link rel="stylesheet" href="layui/css/layui.css"/>
  4.        
复制代码
栅格系统


  • 采用layui-row来定义行
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.        
复制代码

  • 采用layui-col-md*这样的预设类来定义一组列（column）且放在行（row）内，其中

    • 变量md代表的是不同屏幕下的标记
    • 边浪*代表的是该列所占用的12等分（如6/12）可选值为1-12
    • 如果多个列的“等分数值”总和数等于12，刚好满行排布。如果大于12，若雨的列将自动另起一行

  • 列可以同时出现最多四中不同的组合，分别是xs（超小屏幕，如手机），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
  • 可对列追加类似的layui-col-space5，layui-col-md-offerset3这样的预设类来定义列的间距和偏移
  • 可以在类（column）元素中放入你自己的任意元素来填充内容
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.                
  3.         <link rel="stylesheet" href="layui/css/layui.css"/>
  4.         <link<form  action="">
  5. </form>rel="stylesheet"<form  action="">
  6. </form>href="layui/css/layui.css"/>
  7.         <link rel="stylesheet" href="layui/css/layui.css"/>
  8.        
  9.         <link rel="stylesheet" href="layui/css/layui.css"/>
  10.         <link<form  action="">
  11. </form>rel="stylesheet"<form  action="">
  12. </form>href="layui/css/layui.css"/>
  13.         <link rel="stylesheet" href="layui/css/layui.css"/>
  14.                 内容的5/12
  15.         <link rel="stylesheet" href="layui/css/layui.css"/>
  16.         <link<form  action="">
  17. </form>rel="stylesheet"<form  action="">
  18. </form>href="layui/css/layui.css"/>
  19.         <link rel="stylesheet" href="layui/css/layui.css"/>
  20.        
  21.         <link rel="stylesheet" href="layui/css/layui.css"/>
  22.         <link<form  action="">
  23. </form>rel="stylesheet"<form  action="">
  24. </form>href="layui/css/layui.css"/>
  25.         <link rel="stylesheet" href="layui/css/layui.css"/>
  26.        
  27.         <link rel="stylesheet" href="layui/css/layui.css"/>
  28.         <link<form  action="">
  29. </form>rel="stylesheet"<form  action="">
  30. </form>href="layui/css/layui.css"/>
  31.         <link rel="stylesheet" href="layui/css/layui.css"/>
  32.                 内容的7/12
  33.         <link rel="stylesheet" href="layui/css/layui.css"/>
  34.         <link<form  action="">
  35. </form>rel="stylesheet"<form  action="">
  36. </form>href="layui/css/layui.css"/>
  37.         <link rel="stylesheet" href="layui/css/layui.css"/>
  38.        
  39.         <link rel="stylesheet" href="layui/css/layui.css"/>
  40.                
  41.         <link rel="stylesheet" href="layui/css/layui.css"/>
  42.                
  43.         <link rel="stylesheet" href="layui/css/layui.css"/>
  44.         <link<form  action="">
  45. </form>rel="stylesheet"<form  action="">
  46. </form>href="layui/css/layui.css"/>
  47.         <link rel="stylesheet" href="layui/css/layui.css"/>
  48.        
  49.         <link rel="stylesheet" href="layui/css/layui.css"/>
  50.         <link<form  action="">
  51. </form>rel="stylesheet"<form  action="">
  52. </form>href="layui/css/layui.css"/>
  53.         <link rel="stylesheet" href="layui/css/layui.css"/>
  54.                 内容的4/12
  55.         <link rel="stylesheet" href="layui/css/layui.css"/>
  56.         <link<form  action="">
  57. </form>rel="stylesheet"<form  action="">
  58. </form>href="layui/css/layui.css"/>
  59.         <link rel="stylesheet" href="layui/css/layui.css"/>
  60.        
  61.         <link rel="stylesheet" href="layui/css/layui.css"/>
  62.         <link<form  action="">
  63. </form>rel="stylesheet"<form  action="">
  64. </form>href="layui/css/layui.css"/>
  65.         <link rel="stylesheet" href="layui/css/layui.css"/>
  66.        
  67.         <link rel="stylesheet" href="layui/css/layui.css"/>
  68.         <link<form  action="">
  69. </form>rel="stylesheet"<form  action="">
  70. </form>href="layui/css/layui.css"/>
  71.         <link rel="stylesheet" href="layui/css/layui.css"/>
  72.                 内容的4/12
  73.         <link rel="stylesheet" href="layui/css/layui.css"/>
  74.         <link<form  action="">
  75. </form>rel="stylesheet"<form  action="">
  76. </form>href="layui/css/layui.css"/>
  77.         <link rel="stylesheet" href="layui/css/layui.css"/>
  78.        
  79.         <link rel="stylesheet" href="layui/css/layui.css"/>
  80.                
  81.         <link rel="stylesheet" href="layui/css/layui.css"/>
  82.        
复制代码
响应式规则

css媒体查询（Media<form  action="">
</form>Queries）的强力支持，从而针对不同尺寸的屏幕进行相应的适配处理。
类型超小屏幕手机（=768px)中等屏幕（桌面>=992px)大型屏幕（桌面>=1200px.layui-container的值auto750px970px1170px标记xssmmdlg列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*总列数12121212相应行为始终an设定的比例水平排列在当前屏幕下水平排列，如果屏幕的大小低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕的代销低于临界值则堆叠排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
  1. <form  action="">
  2. </form><form  action="">
  3. </form><form  action="">
  4. </form><form  action="">
  5. </form>
  6. <form  action="">
  7. </form><form  action="">
  8. </form><form  action="">
  9. </form><form  action="">
  10. </form><form  action="">
  11. </form><form  action="">
  12. </form><form  action="">
  13. </form><form  action="">
  14. </form>响应式规则
  15. <form  action="">
  16. </form><form  action="">
  17. </form><form  action="">
  18. </form><form  action="">
  19. </form>
复制代码
列边距：

通过“列边距”的预设类，来设定之间的间距。且一行中最左的列不会出现左边距，最右边的列不会出现右边距。列边距在保证排版美观的同时，还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距，预设了12中不同的尺寸的边距。
  1. /*<form  action="">
  2. </form>支持列之间为1px-30px的区间的所有双数间距，以及1px，5px，15px，25px的单数间隔<form  action="">
  3. </form>*/
  4. layui-col-space1
  5. layui-col-space2
  6. layui-col-space4
  7. layui-col-space5
  8. layui-col-space6
  9. .....
复制代码
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.         4
  3.         <link rel="stylesheet" href="layui/css/layui.css"/>
  4.         4
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.         4
  7.        
复制代码
注：
1.layui-col-space，设置后起不到作用因为设置的是padding也就是说向内缩，所以设置背景色padding也是会填上颜色，看起来好像没有间距一样，可以再里面在加一个div，来达到目的。
2.间距一般不高于30px，如果超过30，建议使用列偏移
列偏移

​        对列最佳类似layui-col-md-offset*<form  action="">
</form>的预设类，从而让列向右偏移。其中*代表的是偏移占据的列数，可选中为1-12
如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，让该列向右偏移3个列表宽度
  1.        
  2.         <link rel="stylesheet" href="layui/css/layui.css"/>
  3.         4
  4.         <link rel="stylesheet" href="layui/css/layui.css"/>
  5.         4
  6.        
复制代码
注：
​        列偏移可针对不同屏幕的标准进行设定，在当前设定屏幕下最有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
列嵌套

可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.                
  3.         <link rel="stylesheet" href="layui/css/layui.css"/>
  4.         <link<form  action="">
  5. </form>rel="stylesheet"<form  action="">
  6. </form>href="layui/css/layui.css"/>
  7.         <link rel="stylesheet" href="layui/css/layui.css"/>
  8.        
  9.         <link rel="stylesheet" href="layui/css/layui.css"/>
  10.         <link<form  action="">
  11. </form>rel="stylesheet"<form  action="">
  12. </form>href="layui/css/layui.css"/>
  13.         <link rel="stylesheet" href="layui/css/layui.css"/>
  14.                
  15.         <link rel="stylesheet" href="layui/css/layui.css"/>
  16.         <link<form  action="">
  17. </form>rel="stylesheet"<form  action="">
  18. </form>href="layui/css/layui.css"/>
  19.         <link rel="stylesheet" href="layui/css/layui.css"/>
  20.         <link<form  action="">
  21. </form>rel="stylesheet"<form  action="">
  22. </form>href="layui/css/layui.css"/>
  23.         <link rel="stylesheet" href="layui/css/layui.css"/>
  24.        
  25.         <link rel="stylesheet" href="layui/css/layui.css"/>
  26.         <link<form  action="">
  27. </form>rel="stylesheet"<form  action="">
  28. </form>href="layui/css/layui.css"/>
  29.         <link rel="stylesheet" href="layui/css/layui.css"/>
  30.         <link<form  action="">
  31. </form>rel="stylesheet"<form  action="">
  32. </form>href="layui/css/layui.css"/>
  33.         <link rel="stylesheet" href="layui/css/layui.css"/>
  34.                 内部5
  35.         <link rel="stylesheet" href="layui/css/layui.css"/>
  36.         <link<form  action="">
  37. </form>rel="stylesheet"<form  action="">
  38. </form>href="layui/css/layui.css"/>
  39.         <link rel="stylesheet" href="layui/css/layui.css"/>
  40.         <link<form  action="">
  41. </form>rel="stylesheet"<form  action="">
  42. </form>href="layui/css/layui.css"/>
  43.         <link rel="stylesheet" href="layui/css/layui.css"/>
  44.                 内部5
  45.         <link rel="stylesheet" href="layui/css/layui.css"/>
  46.         <link<form  action="">
  47. </form>rel="stylesheet"<form  action="">
  48. </form>href="layui/css/layui.css"/>
  49.         <link rel="stylesheet" href="layui/css/layui.css"/>
  50.         <link<form  action="">
  51. </form>rel="stylesheet"<form  action="">
  52. </form>href="layui/css/layui.css"/>
  53.         <link rel="stylesheet" href="layui/css/layui.css"/>
  54.                 内部5
  55.         <link rel="stylesheet" href="layui/css/layui.css"/>
  56.         <link<form  action="">
  57. </form>rel="stylesheet"<form  action="">
  58. </form>href="layui/css/layui.css"/>
  59.         <link rel="stylesheet" href="layui/css/layui.css"/>
  60.         <link<form  action="">
  61. </form>rel="stylesheet"<form  action="">
  62. </form>href="layui/css/layui.css"/>
  63.         <link rel="stylesheet" href="layui/css/layui.css"/>
  64.        
  65.         <link rel="stylesheet" href="layui/css/layui.css"/>
  66.         <link<form  action="">
  67. </form>rel="stylesheet"<form  action="">
  68. </form>href="layui/css/layui.css"/>
  69.         <link rel="stylesheet" href="layui/css/layui.css"/>
  70.                
  71.         <link rel="stylesheet" href="layui/css/layui.css"/>
  72.         <link<form  action="">
  73. </form>rel="stylesheet"<form  action="">
  74. </form>href="layui/css/layui.css"/>
  75.         <link rel="stylesheet" href="layui/css/layui.css"/>
  76.        
  77.         <link rel="stylesheet" href="layui/css/layui.css"/>
  78.                
  79.         <link rel="stylesheet" href="layui/css/layui.css"/>
  80.        
复制代码
基本元素

按钮

​        向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。
主题

名称组合原始默认百搭暖色警告禁用
中间是空心：

名称组合主色百搭暖色警告深色
尺寸：

尺寸组合大型默认小型迷你尺寸组合大型百搭正常暖色小型警告迷你禁用
流体自适应

  1. <button<form  action="">
  2. </form>type="button"<form  action="">
  3. </form>>流体按钮（最大化适应）</button>
复制代码
圆角

主题组合原始默认百搭暖色警告禁用尺寸组合大型百搭小型警告迷你禁用
图标

  1. <button<form  action="">
  2. </form>type="button"<form  action="">
  3. </form>><form  action="">
  4. </form><form  action="">
  5. </form><i<form  action="">
  6. </form>></i><form  action="">
  7. </form>按钮</button><form  action="">
  8. </form><button<form  action="">
  9. </form>type="button"<form  action="">
  10. </form>><form  action="">
  11. </form><form  action="">
  12. </form><i<form  action="">
  13. </form>></i></button>
复制代码
默认按钮<form  action="">
</form>样式<form  action="">
</form>大小<form  action="">
</form>圆角<form  action="">
</form>流动自适应
**i<form  action="">
</form><form  action="">
</form>图标<form  action="">
</form>样式<form  action="">
</form>**
导航

​        导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，面包屑结构简单、支持自定义分隔符
​        依赖加载的模块：element
实现的步骤：
引入的资源：
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.         <link<form  action="">
  3. </form>rel="stylesheet"<form  action="">
  4. </form>href="layui/css/layui.css"/>
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.        
复制代码

  • class=“layui-nav”
  • class=“layui-nav-item”--class=“layui-nav-item<form  action="">
    </form>layui-this”选中

    • <form  action="">
      </form>二级菜单
      例子：

  1. <ul<form  action="">
  2. </form><form  action="">
  3. </form>lay-filter="">
  4.         <link rel="stylesheet" href="layui/css/layui.css"/>
  5.         <form  action="">
  6. </form><form  action="">
  7. </form><li<form  action="">
  8. </form>><a<form  action="">
  9. </form>target="_blank"<form  action="">
  10. </form>href="https://www.cnblogs.com/">最新活动</a></li>
  11.         <link rel="stylesheet" href="layui/css/layui.css"/>
  12.         <form  action="">
  13. </form><form  action="">
  14. </form><li<form  action="">
  15. </form>><a<form  action="">
  16. </form>target="_blank"<form  action="">
  17. </form>href="https://www.cnblogs.com/">产品</a></li>
  18.         <link rel="stylesheet" href="layui/css/layui.css"/>
  19.         <form  action="">
  20. </form><form  action="">
  21. </form><li<form  action="">
  22. </form>><a<form  action="">
  23. </form>target="_blank"<form  action="">
  24. </form>href="https://www.cnblogs.com/">大数据</a></li>
  25.         <link rel="stylesheet" href="layui/css/layui.css"/>
  26.         <form  action="">
  27. </form><form  action="">
  28. </form><li<form  action="">
  29. </form>>
  30.         <link rel="stylesheet" href="layui/css/layui.css"/>
  31.         <form  action="">
  32. </form><form  action="">
  33. </form><form  action="">
  34. </form><form  action="">
  35. </form><a<form  action="">
  36. </form>target="_blank"<form  action="">
  37. </form>href="https://www.cnblogs.com/javascript:;">解决方案</a>
  38.         <link rel="stylesheet" href="layui/css/layui.css"/>
  39.         <form  action="">
  40. </form><form  action="">
  41. </form><form  action="">
  42. </form><form  action="">
  43. </form><dl<form  action="">
  44. </form>><form  action="">
  45. </form>
  46.         <link rel="stylesheet" href="layui/css/layui.css"/>
  47.         <form  action="">
  48. </form><form  action="">
  49. </form><form  action="">
  50. </form><form  action="">
  51. </form><form  action="">
  52. </form><form  action="">
  53. </form><dd><a<form  action="">
  54. </form>target="_blank"<form  action="">
  55. </form>href="https://www.cnblogs.com/">移动模块</a></dd>
  56.         <link rel="stylesheet" href="layui/css/layui.css"/>
  57.         <form  action="">
  58. </form><form  action="">
  59. </form><form  action="">
  60. </form><form  action="">
  61. </form><form  action="">
  62. </form><form  action="">
  63. </form><dd><a<form  action="">
  64. </form>target="_blank"<form  action="">
  65. </form>href="https://www.cnblogs.com/">后台模版</a></dd>
  66.         <link rel="stylesheet" href="layui/css/layui.css"/>
  67.         <form  action="">
  68. </form><form  action="">
  69. </form><form  action="">
  70. </form><form  action="">
  71. </form><form  action="">
  72. </form><form  action="">
  73. </form><dd><a<form  action="">
  74. </form>target="_blank"<form  action="">
  75. </form>href="https://www.cnblogs.com/">电商平台</a></dd>
  76.         <link rel="stylesheet" href="layui/css/layui.css"/>
  77.         <form  action="">
  78. </form><form  action="">
  79. </form><form  action="">
  80. </form><form  action="">
  81. </form></dl>
  82.         <link rel="stylesheet" href="layui/css/layui.css"/>
  83.         <form  action="">
  84. </form><form  action="">
  85. </form></li>
  86.         <link rel="stylesheet" href="layui/css/layui.css"/>
  87.         <form  action="">
  88. </form><form  action="">
  89. </form><li<form  action="">
  90. </form>><a<form  action="">
  91. </form>target="_blank"<form  action="">
  92. </form>href="https://www.cnblogs.com/">社区</a></li>
  93.         </ul>
复制代码
垂直样式+侧边

  1. [/code][indent][size=5]背景颜色[/size]
  3. [/indent]样式往后加：[b]layui-bg-[/b]orange
  4. [indent][size=5]徽章[/size]
  6. [/indent]直接对应往后加
  7. [indent][size=5]面包屑[/size]
  9. [/indent][code]<form  action="">
  10. </form><form  action="">
  11. </form>
  12. <form  action="">
  13. </form><form  action="">
  14. </form><form  action="">
  15. </form><form  action="">
  16. </form><a<form  action="">
  17. </form>target="_blank"<form  action="">
  18. </form>href="https://www.cnblogs.com/">首页</a><form  action="">
  19. </form><form  action="">
  20. </form>
  21. <form  action="">
  22. </form><form  action="">
  23. </form><form  action="">
  24. </form><form  action="">
  25. </form><a<form  action="">
  26. </form>target="_blank"<form  action="">
  27. </form>href="https://www.cnblogs.com/">国际新闻</a><form  action="">
  28. </form>
  29. <form  action="">
  30. </form><form  action="">
  31. </form><form  action="">
  32. </form><form  action="">
  33. </form><a<form  action="">
  34. </form>target="_blank"<form  action="">
  35. </form>href="https://www.cnblogs.com/">亚太地区</a><form  action="">
  36. </form><form  action="">
  37. </form>
  38. <form  action="">
  39. </form><form  action="">
  40. </form><form  action="">
  41. </form><form  action="">
  42. </form><a><cite>正文</cite></a>
复制代码

  • 选中
  • 通过设置属性<form  action="">
    </form>lay-separator="-"<form  action="">
    </form>来自定义分隔符
选项卡

引入资源:
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.         <link<form  action="">
  3. </form>rel="stylesheet"<form  action="">
  4. </form>href="layui/css/layui.css"/>
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.        
复制代码


  1. <form  action="">
  2. </form><form  action="">
  3. </form><ul<form  action="">
  4. </form>>
  5. <form  action="">
  6. </form><form  action="">
  7. </form><form  action="">
  8. </form><form  action="">
  9. </form><li<form  action="">
  10. </form>>网站设置</li>
  11. <form  action="">
  12. </form><form  action="">
  13. </form><form  action="">
  14. </form><form  action="">
  15. </form><li>用户管理</li>
  16. <form  action="">
  17. </form><form  action="">
  18. </form><form  action="">
  19. </form><form  action="">
  20. </form><li>权限分配</li>
  21. <form  action="">
  22. </form><form  action="">
  23. </form><form  action="">
  24. </form><form  action="">
  25. </form><li>商品管理</li>
  26. <form  action="">
  27. </form><form  action="">
  28. </form><form  action="">
  29. </form><form  action="">
  30. </form><li>订单管理</li>
  31. <form  action="">
  32. </form><form  action="">
  33. </form></ul>
  34. <form  action="">
  35. </form><form  action="">
  36. </form>
  37. <form  action="">
  38. </form><form  action="">
  39. </form><form  action="">
  40. </form><form  action="">
  41. </form>内容1
  42. <form  action="">
  43. </form><form  action="">
  44. </form><form  action="">
  45. </form><form  action="">
  46. </form>内容2
  47. <form  action="">
  48. </form><form  action="">
  49. </form><form  action="">
  50. </form><form  action="">
  51. </form>内容3
  52. <form  action="">
  53. </form><form  action="">
  54. </form><form  action="">
  55. </form><form  action="">
  56. </form>内容4
  57. <form  action="">
  58. </form><form  action="">
  59. </form><form  action="">
  60. </form><form  action="">
  61. </form>内容5
  62. <form  action="">
  63. </form><form  action="">
  64. </form>
复制代码
风格

默认风格：

  • layui-tab
简洁风格追加样式：

  • layui-tab-brief
卡片风格追加样式：

  • layui-tab-card
带删除

对父层容器设置属性<form  action="">
</form>lay-allowClose="true"<form  action="">
</form>来允许Tab选项卡被删除
表格
  1.         <table<form  action="">
  2. </form><form  action="">
  3. </form>lay-even>
  4.         <form  action="">
  5. </form><form  action="">
  6. </form><colgroup>
  7.         <form  action="">
  8. </form><form  action="">
  9. </form><form  action="">
  10. </form><form  action="">
  11. </form><col<form  action="">
  12. </form>width="150">
  13.         <form  action="">
  14. </form><form  action="">
  15. </form><form  action="">
  16. </form><form  action="">
  17. </form><col<form  action="">
  18. </form>width="200">
  19.         <form  action="">
  20. </form><form  action="">
  21. </form><form  action="">
  22. </form><form  action="">
  23. </form><col>
  24.         <form  action="">
  25. </form><form  action="">
  26. </form></colgroup>
  27.         <form  action="">
  28. </form><form  action="">
  29. </form><thead>
  30.         <form  action="">
  31. </form><form  action="">
  32. </form><form  action="">
  33. </form><form  action="">
  34. </form><tr>
  35.         <form  action="">
  36. </form><form  action="">
  37. </form><form  action="">
  38. </form><form  action="">
  39. </form><form  action="">
  40. </form><form  action="">
  41. </form><th>昵称</th>
  42.         <form  action="">
  43. </form><form  action="">
  44. </form><form  action="">
  45. </form><form  action="">
  46. </form><form  action="">
  47. </form><form  action="">
  48. </form><th>加入时间</th>
  49.         <form  action="">
  50. </form><form  action="">
  51. </form><form  action="">
  52. </form><form  action="">
  53. </form><form  action="">
  54. </form><form  action="">
  55. </form><th>签名</th>
  56.         <form  action="">
  57. </form><form  action="">
  58. </form><form  action="">
  59. </form><form  action="">
  60. </form></tr><form  action="">
  61. </form>
  62.         <form  action="">
  63. </form><form  action="">
  64. </form></thead>
  65.         <form  action="">
  66. </form><form  action="">
  67. </form><tbody>
  68.         <form  action="">
  69. </form><form  action="">
  70. </form><form  action="">
  71. </form><form  action="">
  72. </form><tr>
  73.         <form  action="">
  74. </form><form  action="">
  75. </form><form  action="">
  76. </form><form  action="">
  77. </form><form  action="">
  78. </form><form  action="">
  79. </form><td>贤心</td>
  80.         <form  action="">
  81. </form><form  action="">
  82. </form><form  action="">
  83. </form><form  action="">
  84. </form><form  action="">
  85. </form><form  action="">
  86. </form><td>2016-11-29</td>
  87.         <form  action="">
  88. </form><form  action="">
  89. </form><form  action="">
  90. </form><form  action="">
  91. </form><form  action="">
  92. </form><form  action="">
  93. </form><td>人生就像是一场修行</td>
  94.         <form  action="">
  95. </form><form  action="">
  96. </form><form  action="">
  97. </form><form  action="">
  98. </form></tr>
  99.         <form  action="">
  100. </form><form  action="">
  101. </form><form  action="">
  102. </form><form  action="">
  103. </form><tr>
  104.         <form  action="">
  105. </form><form  action="">
  106. </form><form  action="">
  107. </form><form  action="">
  108. </form><form  action="">
  109. </form><form  action="">
  110. </form><td>许闲心</td>
  111.         <form  action="">
  112. </form><form  action="">
  113. </form><form  action="">
  114. </form><form  action="">
  115. </form><form  action="">
  116. </form><form  action="">
  117. </form><td>2016-11-28</td>
  118.         <form  action="">
  119. </form><form  action="">
  120. </form><form  action="">
  121. </form><form  action="">
  122. </form><form  action="">
  123. </form><form  action="">
  124. </form><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  125.         <form  action="">
  126. </form><form  action="">
  127. </form><form  action="">
  128. </form><form  action="">
  129. </form></tr>
  130.         <form  action="">
  131. </form><form  action="">
  132. </form></tbody>
  133. </table>
复制代码

  • 添加属性<form  action="">
    </form>lay-even<form  action="">
    </form><form  action="">
    </form>隔行换色
风格

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：
属性名属性值备注lay-even无用于开启<form  action="">
</form>隔行<form  action="">
</form>背景，可与其它属性一起使用lay-skin="属性值"line<form  action="">
</form>（行边框风格）<form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form>row<form  action="">
</form>（列边框风格）<form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form>nob<form  action="">
</form>（无边框风格）若使用默认风格不设置该属性即可lay-size="属性值"sm<form  action="">
</form>（小尺寸）<form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form><form  action="">
</form>lg<form  action="">
</form>（大尺寸）若使用默认尺寸不设置该属性即可表单

常用属性


  • required<form  action="">
    </form>浏览器固定的必填字段
  • lay-verify="required"<form  action="">
    </form>需要验证的类型（required<form  action="">
    </form>表示为必填字段）
  • class=“layui-input”<form  action="">
    </form>提供的通用样式
文本框：

  • placeholder<form  action="">
    </form>当文本框为空时默认显示的文本信息
  • autocomplete<form  action="">
    </form>表单元素是否自动填充，当浏览器中缓存有相同name值是会自动填充
引入依赖
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.         <link<form  action="">
  3. </form>rel="stylesheet"<form  action="">
  4. </form>href="layui/css/layui.css"/>
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.        
复制代码

  • form<form  action="">
    </form>模块
1.给定form容器
class=“layui-form”
  1. <form  action="">
  2. </form>
复制代码
2.基本的行区块结构，它提供了相应是的支持，可以换成其他结构，但必学要在外层容器中定义class=“layui-form”，form模块才能正常工作
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.         <link<form  action="">
  3. </form>rel="stylesheet"<form  action="">
  4. </form>href="layui/css/layui.css"/>
  5.         <link rel="stylesheet" href="layui/css/layui.css"/>
  6.         <link<form  action="">
  7. </form>rel="stylesheet"<form  action="">
  8. </form>href="layui/css/layui.css"/>
  9.         <link rel="stylesheet" href="layui/css/layui.css"/>
  10.         <form  action="">
  11. </form><form  action="">
  12. </form><form  action="">
  13. </form><form  action="">
  14. </form>标签区域        <link rel="stylesheet" href="layui/css/layui.css"/>
  15.                 <form  action="">
  16. </form><form  action="">
  17. </form><form  action="">
  18. </form><form  action="">
  19. </form>        <link rel="stylesheet" href="layui/css/layui.css"/>
  20.                 <form  action="">
  21. </form><form  action="">
  22. </form><form  action="">
  23. </form><form  action="">
  24. </form><form  action="">
  25. </form><form  action="">
  26. </form><form  action="">
  27. </form><form  action="">
  28. </form>        <link rel="stylesheet" href="layui/css/layui.css"/>
  29.                 <form  action="">
  30. </form><form  action="">
  31. </form><form  action="">
  32. </form><form  action="">
  33. </form>        <link rel="stylesheet" href="layui/css/layui.css"/>
  34.         <link<form  action="">
  35. </form>rel="stylesheet"<form  action="">
  36. </form>href="layui/css/layui.css"/>
  37.         <link rel="stylesheet" href="layui/css/layui.css"/>
  38.                
复制代码

  • <form  action="">
    </form><form  action="">
    </form>一整行
  • <form  action="">
    </form>行内
输入框

  1. <form  action="">
  2. </form><form  action="">
  3. </form><form  action="">
  4. </form><form  action="">
  5. </form><form  action="">
  6. </form><form  action="">
  7. </form><form  action="">
  8. </form><form  action="">
  9. </form><form  action="">
  10. </form><form  action="">
  11. </form>
复制代码

  • required：注册浏览器所规定的必填字段
  • lay-verify：注册form模块需要验证的类型
  • ：layui.css提供的通用CSS类
下拉框

  1. <form  action="">
  2. </form><form  action="">
  3. </form>请选择一个城市<form  action="">
  4. </form><form  action="">
  5. </form>北京<form  action="">
  6. </form><form  action="">
  7. </form>上海<form  action="">
  8. </form><form  action="">
  9. </form>杭州<form  action="">
  10. </form><form  action="">
  11. </form><form  action="">
  12. </form><form  action="">
  13. </form><form  action="">
  14. </form>
复制代码

  • 通过selected=“selected”设置默认选项
  • disabled属性设置禁用
  • 通过option设置分组
  • 设置lay-search属性开启搜索功能
  1.         <form  action="">
  2. </form>请选择        <link rel="stylesheet" href="layui/css/layui.css"/>
  3.         <form  action="">
  4. </form>你工作的第一个城市？        <link rel="stylesheet" href="layui/css/layui.css"/>
  5.                 <form  action="">
  6. </form>你的工号？        你最喜欢的老师？        <form  action="">
  7. </form>
复制代码
复选框

  1. 默认风格：<form  action="">
  2. </form><form  action="">
  3. </form><form  action="">
  4. </form>原始风格：<form  action="">
  5. </form><form  action="">
  6. </form>
复制代码

  • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的风格
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关

其实就是checkbox复选框的“变种”，通过设定<form  action="">
</form>lay-skin="switch"<form  action="">
</form>形成了开关风格
  1. [/code]
  2. [list]
  3. [*]属性[i]checked[/i]可设定默认开
  4. [*]属性[i]disabled[/i]开启禁用
  5. [*]属性[i]lay-text[/i]可自定义开关两种状态的文本<form  action="">
  6. </form><form  action="">
  7. </form>（打开的值|关闭的值）
  8. [*]设置[i]value="1"[/i]可自定义值，否则选中时返回的就是默认的on
  9. [/list][indent][size=5]单选框[/size]
  11. [/indent][code]
复制代码

  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域

  1. [/code][indent][size=5]组装行内表单[/size]
  3. [/indent][code]div<form  action="">
  4. </form>><form  action="">
  5. </form><form  action="">
  6. </form><form  action="">
  7. </form><form  action="">
  8. </form><form  action="">
  9. </form><form  action="">
  10. </form><form  action="">
  11. </form>范围<form  action="">
  12. </form><form  action="">
  13. </form><form  action="">
  14. </form><form  action="">
  15. </form><form  action="">
  16. </form><form  action="">
  17. </form><form  action="">
  18. </form><form  action="">
  19. </form><form  action="">
  20. </form><form  action="">
  21. </form><form  action="">
  22. </form><form  action="">
  23. </form><form  action="">
  24. </form><form  action="">
  25. </form><form  action="">
  26. </form><form  action="">
  27. </form><form  action="">
  28. </form><form  action="">
  29. </form>-<form  action="">
  30. </form><form  action="">
  31. </form><form  action="">
  32. </form><form  action="">
  33. </form><form  action="">
  34. </form><form  action="">
  35. </form><form  action="">
  36. </form><form  action="">
  37. </form><form  action="">
  38. </form><form  action="">
  39. </form><form  action="">
  40. </form><form  action="">
  41. </form><form  action="">
  42. </form><form  action="">
  43. </form><form  action="">
  44. </form><form  action="">
  45. </form><form  action="">
  46. </form><form  action="">
  47. </form><form  action="">
  48. </form><form  action="">
  49. </form><form  action="">
  50. </form><form  action="">
  51. </form><form  action="">
  52. </form><form  action="">
  53. </form>密码<form  action="">
  54. </form><form  action="">
  55. </form><form  action="">
  56. </form><form  action="">
  57. </form><form  action="">
  58. </form><form  action="">
  59. </form><form  action="">
  60. </form><form  action="">
  61. </form><form  action="">
  62. </form><form  action="">
  63. </form><form  action="">
  64. </form><form  action="">
  65. </form><form  action="">
  66. </form><form  action="">
  67. </form><form  action="">
  68. </form><form  action="">
  69. </form><form  action="">
  70. </form><form  action="">
  71. </form>
复制代码

  • ：定义外层行内
  • ：定义内层行内
忽略美化渲染

  1. <form  action="">
  2. </form><form  action="">
  3. </form>…
复制代码

  • lay-ignore
方框效果

通过追加<form  action="">
</form>layui-form-pane<form  action="">
</form>的class，来设定表单的方框风格。内部结构不变。
  1. <form  action="">
  2. </form><form  action="">
  3. </form>内部结构都一样，值得注意的是<form  action="">
  4. </form>复选框/开关/单选框<form  action="">
  5. </form>这些组合在该风格下需要额外添加<form  action="">
  6. </form>pane属性（否则会看起来比较别扭），如：<form  action="">
  7. </form><form  action="">
  8. </form><form  action="">
  9. </form><form  action="">
  10. </form><form  action="">
  11. </form><form  action="">
  12. </form>单选框<form  action="">
  13. </form><form  action="">
  14. </form><form  action="">
  15. </form><form  action="">
  16. </form><form  action="">
  17. </form><form  action="">
  18. </form><form  action="">
  19. </form><form  action="">
  20. </form><form  action="">
  21. </form><form  action="">
  22. </form><form  action="">
  23. </form><form  action="">
  24. </form><form  action="">
  25. </form><form  action="">
  26. </form><form  action="">
  27. </form><form  action="">
  28. </form><form  action="">
  29. </form><form  action="">
  30. </form><form  action="">
  31. </form><form  action="">
  32. </form><form  action="">
  33. </form><form  action="">
  34. </form>
复制代码
弹出层

引入依赖：
  1.         <link rel="stylesheet" href="layui/css/layui.css"/>
  2.        
复制代码
模块化：

  • layer
layer<form  action="">
</form>作为<form  action="">
</form>Layui<form  action="">
</form>的代表性组件<form  action="">
</form>，比<form  action="">
</form>Layui<form  action="">
</form>要出现的早，作为<form  action="">
</form>Layui<form  action="">
</form>最早的源动力，layer<form  action="">
</form>的使用之广泛甚至一度超过了<form  action="">
</form>Layui<form  action="">
</form>本身。<form  action="">
</form>layer<form  action="">
</form>拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案，在各类场景都能发挥重要作用。
场景用前准备1.<form  action="">
</form>作为独立组件使用如果你只是单独想使用<form  action="">
</form>layer，你可以去<form  action="">
</form>layer<form  action="">
</form>独立版本官网下载组件包。你需要在你的页面引入jQuery1.8<form  action="">
</form>以上的任意版本，并引入layer.js。2.<form  action="">
</form>作为<form  action="">
</form>layui<form  action="">
</form>组件使用如果你使用的是<form  action="">
</form>layui，那么你直接在官网下载<form  action="">
</form>layui<form  action="">
</form>框架即可，无需引入<form  action="">
</form>jQuery<form  action="">
</form>和<form  action="">
</form>layer.js，但需要引入layui.css和layui.js
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

嚴華

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表