常用类
一.布局容器
1.将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
2.将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
<div class="layui-container">常规布局</div> <div class="layui-fluid">宽度100%布局</div>
基础知识
| 1. | 采用 layui-row 来定义行，如：<div class="layui-row"></div> |
| 2. | 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
|
| 3. |
列可以同时出现最多四种不同的组合，分别是：xs（移动端 超小屏幕，如手机）、sm（小屏幕，如平板）、md（电脑 桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 layui-col-xs4 #定义移动端的四列 layui-col-sm4 #定义平板的4列 layui-col-md4 #定义电脑桌面的4列 layui-col-lg4 #定义桌面大型屏幕的4列 |
| 4. |
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 layui-col-space10 #控制列间距 10px 单位px layui-col-md-offset* #控制列向右偏移几列 |
| 5. | 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！ |
eg:以中型桌面为例
<div class="layui-container"> <--定义常规主屏幕 --> <div class="layui-row layui-col-space10"> <-- 定义一行 共有12列 列间距为10px--> <div class="layui-col-md4" style="background-color: red;"> <-- 定义4列 --> daf </div> <div class="layui-col-md4 layui-col-md-offset4" style="background-color: red;"> <-- 定义4列 并使这四列向右偏移至屏幕最右边--> daf </div> </div> </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 | |||
| 响应行为 | 始终按设定的比例水平排列 | 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 | ||
三.基本的后台布局
codelayui.code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <-- 定义移动端的视口 -->
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <-- 改成自己的layui文件路径 -->
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="../src/layui.js"></script> <-- 改成自己的layui文件路径 -->
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
codelayui.code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>layout 后台大布局 - Layui</title>
- <link rel="stylesheet" href="../src/css/layui.css">
- </head>
- <body class="layui-layout-body">
- <div class="layui-layout layui-layout-admin">
- <div class="layui-header">
- <div class="layui-logo">layui 后台布局</div>
- <!-- 头部区域（可配合layui已有的水平导航） -->
- <ul class="layui-nav layui-layout-left">
- <li class="layui-nav-item"><a href="">控制台</a></li>
- <li class="layui-nav-item"><a href="">商品管理</a></li>
- <li class="layui-nav-item"><a href="">用户</a></li>
- <li class="layui-nav-item">
- <a href="javascript:;">其它系统</a>
- <dl class="layui-nav-child">
- <dd><a href="">邮件管理</a></dd>
- <dd><a href="">消息管理</a></dd>
- <dd><a href="">授权管理</a></dd>
- </dl>
- </li>
- </ul>
- <ul class="layui-nav layui-layout-right">
- <li class="layui-nav-item">
- <a href="javascript:;">
- <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
- 贤心
- </a>
- <dl class="layui-nav-child">
- <dd><a href="">基本资料</a></dd>
- <dd><a href="">安全设置</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item"><a href="">退了</a></li>
- </ul>
- </div>
- <div class="layui-side layui-bg-black">
- <div class="layui-side-scroll">
- <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
- <ul class="layui-nav layui-nav-tree" lay-filter="test">
- <li class="layui-nav-item layui-nav-itemed">
- <a class="" href="javascript:;">所有商品</a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">列表一</a></dd>
- <dd><a href="javascript:;">列表二</a></dd>
- <dd><a href="javascript:;">列表三</a></dd>
- <dd><a href="">超链接</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item">
- <a href="javascript:;">解决方案</a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">列表一</a></dd>
- <dd><a href="javascript:;">列表二</a></dd>
- <dd><a href="">超链接</a></dd>
- </dl>
- </li>
- <li class="layui-nav-item"><a href="">云市场</a></li>
- <li class="layui-nav-item"><a href="">发布商品</a></li>
- </ul>
- </div>
- </div>
- <div class="layui-body">
- <!-- 内容主体区域 -->
- <div style="padding: 15px;">内容主体区域</div>
- </div>
- <div class="layui-footer">
- <!-- 底部固定区域 -->
- © layui.com - 底部固定区域
- </div>
- </div>
- <script src="../src/layui.js"></script>
- <script>
- //JavaScript代码区域
- layui.use('element', function(){
- var element = layui.element;
- });
- </script>
- </body>
- </html>