搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

栅格系统与后台布局

如你所愿,在 layui 2.0 的版本中,我们加入了强劲的栅格系统和常见的管理系统布局方案,这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则,内置手机、平板、PC 桌面中大型屏幕的多终端适配处理,最低能支持到 ie8。而你应当更欣喜的是,layui 终于开放了它经典的管理系统布局方案,快速搭建一个属于你的管理系统将变得十分轻松自如。
栅格系统

为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

一、栅格布局规则:


1. 采用 layui-row 来定义行,如:<div class="layui-row"></div>
2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:
  • 变量md 代表的是不同屏幕下的标记(可选值见下文)
  • 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12
  • 如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
4. 可对列追加类似 layui-col-space5layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

示例(这里只是大致列举两个,更多实例请前往 示例-栅格 查看)

你的内容 9/12
你的内容 3/12

50% | 33.33% | 33.33%
50% | 66.67% | 33.33%
33.33% | 100% | 33.33%
33.33% | 50% | 66.67%
33.33% | 50% | 33.33%

示例code

  1. <div class="layui-container">
  2. 常规布局(以中型屏幕桌面为例):
  3. <div class="layui-row">
  4. <div class="layui-col-md9">
  5. 你的内容 9/12
  6. </div>
  7. <div class="layui-col-md3">
  8. 你的内容 3/12
  9. </div>
  10. </div>
  11. 移动设备、平板、桌面端的不同表现:
  12. <div class="layui-row">
  13. <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
  14. 移动:6/12 | 平板:6/12 | 桌面:4/12
  15. </div>
  16. <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
  17. 移动:6/12 | 平板:6/12 | 桌面:4/12
  18. </div>
  19. <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
  20. 移动:4/12 | 平板:12/12 | 桌面:4/12
  21. </div>
  22. <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
  23. 移动:4/12 | 平板:7/12 | 桌面:8/12
  24. </div>
  25. <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
  26. 移动:4/12 | 平板:5/12 | 桌面:4/12
  27. </div>
  28. </div>
  29. </div>

二、响应式规则:


栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理

超小屏幕
(手机<768px)
小屏幕
(平板≥768px)
中等屏幕
(桌面≥992px)
大型屏幕
(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类
* 为1-12的等分数值
layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
总列数 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列

三、响应式公共类:


类名(class) 说明
layui-show-*-block 定义不同设备下的 display: block; * 可选值有:xs、sm、md、lg
layui-show-*-inline 定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block 定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-* 定义不同设备下的隐藏类,即: display: none; * 可选值同上

四、布局容器:


将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。

</>code

  1. <div class="layui-container">
  2. <div class="layui-row">
  3. ……
  4. </div>
  5. </div>

当然,你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应

</>code

  1. <div class="layui-fluid">
  2. ……
  3. </div>

五、列间距:


通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
支持列之间为 1px-30px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔

下面是一个简单的例子,列间距为10px:

1/3
1/3
1/3

</>code

  1. <div class="layui-row layui-col-space10">
  2. <div class="layui-col-md4">
  3. 1/3
  4. </div>
  5. <div class="layui-col-md4">
  6. 1/3
  7. </div>
  8. <div class="layui-col-md4">
  9. 1/3
  10. </div>
  11. </div>

如果需要的间距高于30px(一般不常见),请采用偏移,下文继续讲解


六、列偏移:


对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。
如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度

下面是一个采用「列偏移」机制让两个列左右对齐的实例

4/12
偏移4列,从而在最右

</>code

  1. <div class="layui-row">
  2. <div class="layui-col-md4">
  3. 4/12
  4. </div>
  5. <div class="layui-col-md4 layui-col-md-offset4">
  6. 偏移4列,从而在最右
  7. </div>
  8. </div>

请注意,列偏移可针对不同屏幕的标准进行设定,比如上述的例子,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。


七、栅格嵌套:


理论上,你可以对栅格进行无穷层次的嵌套,这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素(layui-col-md*)中插入一个行元素(layui-row),即可完成嵌套。下面是一个简单的例子:

内部列
内部列
内部列
内部列
内部列
内部列

</>code

  1. <div class="layui-row layui-col-space5">
  2. <div class="layui-col-md5">
  3. <div class="layui-row grid-demo">
  4. <div class="layui-col-md3">
  5. 内部列
  6. </div>
  7. <div class="layui-col-md9">
  8. 内部列
  9. </div>
  10. <div class="layui-col-md12">
  11. 内部列
  12. </div>
  13. </div>
  14. </div>
  15. <div class="layui-col-md7">
  16. <div class="layui-row grid-demo grid-demo-bg1">
  17. <div class="layui-col-md12">
  18. 内部列
  19. </div>
  20. <div class="layui-col-md9">
  21. 内部列
  22. </div>
  23. <div class="layui-col-md3">
  24. 内部列
  25. </div>
  26. </div>
  27. </div>
  28. </div>

八、让IE8/9兼容栅格:


事实上IE8和IE9并不支持媒体查询(Media Queries),但你可以使用下面的补丁完美兼容!该补丁来自于开源社区:

</>code

  1. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  2. <!--[if lt IE 9]>
  3. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  4. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  5. <![endif]-->

将上述代码放入你页面 <body> 标签内的任意位置

管理系统界面布局

layui 之所以赢得如此多人的青睐,更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面,又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码,你可以前往示例页面:预览布局效果

</>HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>layout 管理系统大布局 - Layui</title>
  7. <link rel="stylesheet" href="./layui/css/layui.css">
  8. </head>
  9. <body>
  10. <div class="layui-layout layui-layout-admin">
  11. <div class="layui-header">
  12. <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
  13. <!-- 头部区域(可配合layui 已有的水平导航) -->
  14. <ul class="layui-nav layui-layout-left">
  15. <!-- 移动端显示 -->
  16. <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
  17. <i class="layui-icon layui-icon-spread-left"></i>
  18. </li>
  19. <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
  20. <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
  21. <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
  22. <li class="layui-nav-item">
  23. <a href="javascript:;">nav groups</a>
  24. <dl class="layui-nav-child">
  25. <dd><a href="">menu 11</a></dd>
  26. <dd><a href="">menu 22</a></dd>
  27. <dd><a href="">menu 33</a></dd>
  28. </dl>
  29. </li>
  30. </ul>
  31. <ul class="layui-nav layui-layout-right">
  32. <li class="layui-nav-item layui-hide layui-show-md-inline-block">
  33. <a href="javascript:;">
  34. <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
  35. tester
  36. </a>
  37. <dl class="layui-nav-child">
  38. <dd><a href="">Your Profile</a></dd>
  39. <dd><a href="">Settings</a></dd>
  40. <dd><a href="">Sign out</a></dd>
  41. </dl>
  42. </li>
  43. <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
  44. <a href="javascript:;">
  45. <i class="layui-icon layui-icon-more-vertical"></i>
  46. </a>
  47. </li>
  48. </ul>
  49. </div>
  50. <div class="layui-side layui-bg-black">
  51. <div class="layui-side-scroll">
  52. <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
  53. <ul class="layui-nav layui-nav-tree" lay-filter="test">
  54. <li class="layui-nav-item layui-nav-itemed">
  55. <a class="" href="javascript:;">menu group 1</a>
  56. <dl class="layui-nav-child">
  57. <dd><a href="javascript:;">menu 1</a></dd>
  58. <dd><a href="javascript:;">menu 2</a></dd>
  59. <dd><a href="javascript:;">menu 3</a></dd>
  60. <dd><a href="">the links</a></dd>
  61. </dl>
  62. </li>
  63. <li class="layui-nav-item">
  64. <a href="javascript:;">menu group 2</a>
  65. <dl class="layui-nav-child">
  66. <dd><a href="javascript:;">list 1</a></dd>
  67. <dd><a href="javascript:;">list 2</a></dd>
  68. <dd><a href="">超链接</a></dd>
  69. </dl>
  70. </li>
  71. <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
  72. <li class="layui-nav-item"><a href="">the links</a></li>
  73. </ul>
  74. </div>
  75. </div>
  76. <div class="layui-body">
  77. <!-- 内容主体区域 -->
  78. <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  79. </div>
  80. <div class="layui-footer">
  81. <!-- 底部固定区域 -->
  82. 底部固定区域
  83. </div>
  84. </div>
  85. <script src="./layui/layui.js"></script>
  86. <script>
  87. //JS
  88. layui.use(['element', 'layer', 'util'], function(){
  89. var element = layui.element
  90. ,layer = layui.layer
  91. ,util = layui.util
  92. ,$ = layui.$;
  93. //头部事件
  94. util.event('lay-header-event', {
  95. //左侧菜单事件
  96. menuLeft: function(othis){
  97. layer.msg('展开左侧菜单的操作', {icon: 0});
  98. }
  99. ,menuRight: function(){
  100. layer.open({
  101. type: 1
  102. ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
  103. ,area: ['260px', '100%']
  104. ,offset: 'rt' //右上角
  105. ,anim: 5
  106. ,shadeClose: true
  107. });
  108. }
  109. });
  110. });
  111. </script>
  112. </body>
  113. </html>

结语

layui - 在每一个细节中,用心与你沟通