演示
调试预览
布局
栅格
框架
基本元素
按钮
表单
导航 / 面包屑
基础菜单
选项卡
进度条
面板
徽章
时间线
静态表格
动画
辅助元素
组件示例
弹出层
日期与时间选择
数据表格
分页
下拉菜单
文件上传
穿梭框
树形组件
颜色选择器
滑块
评分
轮播
模板引擎
流加载
工具模块
文本行修饰
预览
查看代码
帮助
注意:下述演示中的颜色只是做一个区分作用,并非栅格内置。
始终等比例水平排列
6/12
6/12
3/12
3/12
3/12
3/12
移动设备、桌面端的组合响应式展现
移动:12/12、桌面:8/12
移动:6/12、桌面:4/12
移动:6/12、桌面:12/12
移动设备、平板、桌面端的复杂组合响应式展现
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:4/12 | 平板:12/12 | 桌面:4/12
移动:4/12 | 平板:7/12 | 桌面:8/12
移动:4/12 | 平板:5/12 | 桌面:4/12
常规布局:从小屏幕堆叠到桌面水平排列
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
75%
25%
33.33%
33.33%
33.33%
50%
50%
列间隔
1/4
1/4
1/4
1/4
1/3
1/3
1/3
9/12
3/12
7/12
5/12
7/12
5/12
列偏移
4/12
偏移4列
偏移5列
不偏移
偏移3列
偏移1列
栅格嵌套
内部列
内部列
内部列
内部列
内部列
内部列
流体容器(宽度自适应,不固定)
25%
25%
25%
25%
更多我们未能呈现的示例,还有待您在阅读文档、以及不断使用的过程,去深入挖掘。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/layui/dist/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> </head>
相关
栅格布局文档