1.3 布局
在Layui2.0的版本中加入了强劲的栅格系统和后台布局方案，这意味着终于可以着手采用Layui排版响应式网站和后台系统了。
Layui的栅格系统采用业界比较常见的12等分规则，内置：
（1）移动设备
（2）平板
（3）桌面中等屏幕
（4）大型屏幕
多终端适配处理，最低能支持到IE8。
1.3.1 栅格系统
为了丰富网页布局，简化HTML/CSS代码的耦合，并提升多终端的适配能力，Layui在2.0的版本中引进了自己的一套具备响应式能力的栅格系统。对容器进行了12等分，预设了4*12种CSS排版类，它们在移动设备、平板、桌面中等屏幕，大型屏幕这四种不同大小规格的屏幕下发挥着各自的作用。
使用栅格系统需要借助于class="layui-row"样式来定义行，示例代码如下：
<div class="layui-row"></div>
使用栅格系统需要借助于class="layui-col-md*"样式来定义列，示例代码如下：
<div class="layui-col-md*"></div>
列<div>要放在行<div>内部。
变量md代表的是不同屏幕大小下的标记。可以取值xs（超小屏幕，如手机），sm（小屏幕，如平板），md（桌面中等屏幕），lg（桌面大型屏幕）。
变量*代表的是该列占用12等分，和容器的宽度一样。可选值为1-12。
如果一行中多个列的“等分数”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行进行显示。
响应式规则如图1-xx所示。
图1-xx
1.3.2 测试xs
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs1" style="background-color: red;">1</div><br />
<div class="layui-col-xs2" style="background-color: red;">2</div><br />
<div class="layui-col-xs3" style="background-color: red;">3</div><br />
<div class="layui-col-xs4" style="background-color: red;">4</div><br />
<div class="layui-col-xs5" style="background-color: red;">5</div><br />
<div class="layui-col-xs6" style="background-color: red;">6</div><br />
<div class="layui-col-xs7" style="background-color: red;">7</div><br />
<div class="layui-col-xs8" style="background-color: red;">8</div><br />
<div class="layui-col-xs9" style="background-color: red;">9</div><br />
<div class="layui-col-xs10" style="background-color: red;">10</div><br />
<div class="layui-col-xs11" style="background-color: red;">11</div><br />
<div class="layui-col-xs12" style="background-color: red;">12</div><br /><br />
<div class="layui-col-xs*" style="background-color: red;">12</div><br />
</div>
</body>
</html>
运行结果如图1-xx所示。
图1-xx
1.3.3 测试sm
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-sm1" style="background-color: red;">1</div><br />
<div class="layui-col-sm2" style="background-color: red;">2</div><br />
<div class="layui-col-sm3" style="background-color: red;">3</div><br />
<div class="layui-col-sm4" style="background-color: red;">4</div><br />
<div class="layui-col-sm5" style="background-color: red;">5</div><br />
<div class="layui-col-sm6" style="background-color: red;">6</div><br />
<div class="layui-col-sm7" style="background-color: red;">7</div><br />
<div class="layui-col-sm8" style="background-color: red;">8</div><br />
<div class="layui-col-sm9" style="background-color: red;">9</div><br />
<div class="layui-col-sm10" style="background-color: red;">10</div><br />
<div class="layui-col-sm11" style="background-color: red;">11</div><br />
<div class="layui-col-sm12" style="background-color: red;">12</div><br /><br />
<div class="layui-col-sm*" style="background-color: red;">12</div><br />
</div>
</body>
</html>
运行结果如图1-xx所示。
图1-xx
1.3.4 测试md
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md1" style="background-color: red;">1</div><br />
<div class="layui-col-md2" style="background-color: red;">2</div><br />
<div class="layui-col-md3" style="background-color: red;">3</div><br />
<div class="layui-col-md4" style="background-color: red;">4</div><br />
<div class="layui-col-md5" style="background-color: red;">5</div><br />
<div class="layui-col-md6" style="background-color: red;">6</div><br />
<div class="layui-col-md7" style="background-color: red;">7</div><br />
<div class="layui-col-md8" style="background-color: red;">8</div><br />
<div class="layui-col-md9" style="background-color: red;">9</div><br />
<div class="layui-col-md10" style="background-color: red;">10</div><br />
<div class="layui-col-md11" style="background-color: red;">11</div><br />
<div class="layui-col-md12" style="background-color: red;">12</div><br /><br />
<div class="layui-col-md*" style="background-color: red;">12</div><br />
</div>
</body>
</html>
运行结果如图1-xx所示。
图1-xx
1.3.5 测试lg
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-lg1" style="background-color: red;">1</div><br />
<div class="layui-col-lg2" style="background-color: red;">2</div><br />
<div class="layui-col-lg3" style="background-color: red;">3</div><br />
<div class="layui-col-lg4" style="background-color: red;">4</div><br />
<div class="layui-col-lg5" style="background-color: red;">5</div><br />
<div class="layui-col-lg6" style="background-color: red;">6</div><br />
<div class="layui-col-lg7" style="background-color: red;">7</div><br />
<div class="layui-col-lg8" style="background-color: red;">8</div><br />
<div class="layui-col-lg9" style="background-color: red;">9</div><br />
<div class="layui-col-lg10" style="background-color: red;">10</div><br />
<div class="layui-col-lg11" style="background-color: red;">11</div><br />
<div class="layui-col-lg12" style="background-color: red;">12</div><br /><br />
<div class="layui-col-lg*" style="background-color: red;">12</div><br />
</div>
</body>
</html>
运行结果如图1-xx所示。
图1-xx
1.3.6 实现不同列宽
xs，sm，md，lg这四者运行效果看似差不多，区别是当浏览器宽度缩小时出现响应式的时机不一样。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-lg2" style="background-color: red;">2</div>
<div class="layui-col-lg3" style="background-color: green;">3</div>
<div class="layui-col-lg7" style="background-color: blue;">7</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
当浏览器宽度>=1200像素时运行结果如图1-xx所示。
图1-xx
当浏览器宽度<1200像素时运行结果如图1-xx所示。
图1-xx
以1200像素为分割点的原因是lg规则定义的，如图1-xx所示。
图1-xx
请自行测试md以992像素为分割点的效果。
请自行测试sm以768像素为分割点的效果。
1.3.7 测试移动设备、平板、桌面端的不同表现
测试移动设备、平板、桌面端的不同表现。
1.3.7.1 测试1
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-md8">
<div style="background-color: red;">移动：12/12、桌面：8/12</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div style="background-color: blue;">移动：6/12、桌面：4/12</div>
</div>
<div class="layui-col-xs6 layui-col-md12">
<div style="background-color: green;">移动：6/12、桌面：12/12</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
中等屏幕md中运行结果如图1-xx所示。
手机xs中运行结果如图1-xx所示。
1.3.7.2 测试2
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
<div class="layui-col-md9" style="background-color: red;">
你的内容 9/12
</div>
<div class="layui-col-md3" style="background-color: green;">
你的内容 3/12
</div>
</div>
移动设备、平板、桌面端的不同表现：
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: red;">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: green;">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: blue;">
移动：4/12 | 平板：12/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: red;">
移动：4/12 | 平板：7/12 | 桌面：8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: green;">
移动：4/12 | 平板：5/12 | 桌面：4/12
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
中等屏幕md中运行结果如图1-xx所示。
平板sm中运行结果如图1-xx所示。
手机xs中运行结果如图1-xx所示。
1.3.8 大于12等分后的列在下一行显示
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-lg2" style="background-color: red;">2</div>
<div class="layui-col-lg3" style="background-color: green;">3</div>
<div class="layui-col-lg7" style="background-color: blue;">7</div>
<div class="layui-col-lg2" style="background-color: green;">2</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.9 响应式公共类
响应式公共类如图1-xx所示。
图1-xx
1.3.9.1 测试layui-show-*-block
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-sm*">
<span style="background-color: red;">span1</span>
<span style="background-color: green;">span2</span>
<span style="background-color: blue;">span3</span>
</div>
<br />
<div class="layui-col-sm*" style="background-color: red;">
<span class="layui-show-sm-block" style="background-color: red;">span1</span>
<span class="layui-show-sm-block" style="background-color: green;">span2</span>
<span class="layui-show-sm-block" style="background-color: blue;">span3</span>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.9.2 测试layui-show-*-inline
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-sm*">
<div style="background-color: red;">div1</div>
<div style="background-color: green;">div2</div>
<div style="background-color: blue;">div3</div>
</div>
<br />
<div class="layui-col-sm*">
<div class="layui-show-sm-inline" style="height: 100px;background-color: red;">div1</div>
<div class="layui-show-sm-inline" style="height: 100px;background-color: green;">div2</div>
<div class="layui-show-sm-inline" style="height: 100px;background-color: blue;">div3</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
但对div设置的height: 100px;属性并没有生效，需要使用layui-show-*-inline-block样式来使高度生效。
1.3.9.3 测试layui-show-*-inline-block
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-sm*">
<div style="background-color: red;">div1</div>
<div style="background-color: green;">div2</div>
<div style="background-color: blue;">div3</div>
</div>
<br />
<div class="layui-col-sm*">
<div class="layui-show-sm-inline-block" style="height: 100px;background-color: red;">div1</div>
<div class="layui-show-sm-inline-block" style="height: 100px;background-color: green;">div2</div>
<div class="layui-show-sm-inline-block" style="height: 100px;background-color: blue;">div3</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.9.4 测试layui-hide-*
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-sm*">
<div style="background-color: red;">div1</div>
<div style="background-color: green;">div2</div>
<div style="background-color: blue;">div3</div>
</div>
<br />
<div class="layui-col-sm*">
<div class="layui-hide-sm" style="height: 100px;background-color: red;">div1</div>
<div class="layui-hide-sm" style="height: 100px;background-color: green;">div2</div>
<div class="layui-hide-sm" style="height: 100px;background-color: blue;">div3</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.10 设置列间距
设置列间距的样式如图1-xx所示。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: red;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: green;">2</div>
</div>
<div class="layui-col-md4">
<div style="background-color: blue;">3</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.11 设置列偏移
设置列偏移。
1.3.11.1 测试1
对列追加layui-col-md-offset*样式类可以让列向右偏移。其中*号代表的是偏移占据的列数，可选值为1-12。例如layui-col-md-offset3，代表在“中型桌面屏幕”下让该列向右偏移3个列宽度。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: red;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4" style="background-color: green;">
偏移4列，从而在最右
</div>
</div>
<div class="layui-row">
<div class="layui-col-md1" style="background-color: red;">
1
</div>
<div class="layui-col-md1" style="background-color: green;">
2
</div>
<div class="layui-col-md1" style="background-color: blue;">
3
</div>
<div class="layui-col-md1" style="background-color: red;">
4
</div>
<div class="layui-col-md1" style="background-color: green;">
5
</div>
<div class="layui-col-md1" style="background-color: blue;">
6
</div>
<div class="layui-col-md1" style="background-color: red;">
7
</div>
<div class="layui-col-md1" style="background-color: green;">
8
</div>
<div class="layui-col-md1" style="background-color: blue;">
9
</div>
<div class="layui-col-md1" style="background-color: red;">
10
</div>
<div class="layui-col-md1" style="background-color: green;">
11
</div>
<div class="layui-col-md1" style="background-color: blue;">
12
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
请注意，列偏移可针对不同屏幕的标准进行设置，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕规定的临界值，就会堆叠排列。
1.3.11.2 测试2
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: red;">4/12</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color: green;">偏移4列</div>
</div>
<div class="layui-col-md1 layui-col-md-offset5">
<div style="background-color: blue;">偏移5列</div>
</div>
<div class="layui-col-md1">
<div style="background-color: red;">不偏移</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md3 layui-col-md-offset3">
<div style="background-color: green;">偏移3列</div>
</div>
<div class="layui-col-md3 layui-col-md-offset1">
<div style="background-color: blue;">偏移1列</div>
</div>
</div>
<br />
<div class="layui-row">
<div class="layui-col-md1" style="background-color: red;">
1
</div>
<div class="layui-col-md1" style="background-color: green;">
2
</div>
<div class="layui-col-md1" style="background-color: blue;">
3
</div>
<div class="layui-col-md1" style="background-color: red;">
4
</div>
<div class="layui-col-md1" style="background-color: green;">
5
</div>
<div class="layui-col-md1" style="background-color: blue;">
6
</div>
<div class="layui-col-md1" style="background-color: red;">
7
</div>
<div class="layui-col-md1" style="background-color: green;">
8
</div>
<div class="layui-col-md1" style="background-color: blue;">
9
</div>
<div class="layui-col-md1" style="background-color: red;">
10
</div>
<div class="layui-col-md1" style="background-color: green;">
11
</div>
<div class="layui-col-md1" style="background-color: blue;">
12
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.12 布局容器
Layui提供两种布局容器：
（1）class="layui-container"：将栅格放入一个带有class="layui-container"类样式的容器中，可以在小屏幕以上的设备中固定宽度。
（2）class="layui-fluid"：将栅格或其它元素放入一个带有class="layui-fluid"类样式的容器中，那么宽度将不会固定，而是100%适应。
无布局容器的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: red;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: green;">2</div>
</div>
<div class="layui-col-md4">
<div style="background-color: blue;">3</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
红色div在左上角显示，并且和浏览器边框没有间距。
使用class="layui-container"布局容器定义固定宽度的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-container" style="width: 800px;">
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: red;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: green;">2</div>
</div>
<div class="layui-col-md4">
<div style="background-color: blue;">3</div>
</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
宽度固定800px，并且水平居中显示，并且红色div有左外边距，如图1-xx所示。
使用class="layui-fluid"布局容器定义不是固定宽度的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: red;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: green;">2</div>
</div>
<div class="layui-col-md4">
<div style="background-color: blue;">3</div>
</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
容器的宽度随着浏览器的宽度而改变，并且有左右外边距。
1.3.13 栅格嵌套
理论上可以对栅格进行无限层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单，在列元素（layui-col-md*）中插入一个行元素（layui-row）即可完成嵌套。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row layui-col-space5">
<div class="layui-col-md5">
<div class="layui-row">
<div class="layui-col-md3" style="background-color: red;">
内部列
</div>
<div class="layui-col-md9" style="background-color: green;">
内部列
</div>
<div class="layui-col-md12" style="background-color: blue;">
内部列
</div>
</div>
</div>
<div class="layui-col-md7">
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内部列
</div>
<div class="layui-col-md9" style="background-color: green;">
内部列
</div>
<div class="layui-col-md3" style="background-color: blue;">
内部列
</div>
</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
运行结果如图1-xx所示。
练习设计如图1-xx所示的布局。
列间距为5像素。
参考答案如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row layui-col-space5">
<div class="layui-col-md4">
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: red;">
内容
</div>
</div>
</div>
</div>
<span id="screenWidth"></span>
<script>
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
</script>
</body>
</html>
1.3.14 实现admin后台管理布局
测试代码如下：
<!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="layui/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="layui/layui.all.js"></script>
<script>
var element = layui.element;
</script>
</body>
</html>
运行结果如图1-xx所示。
1.3.15 实现admin后台管理布局作业与答案
（1）再添加2组如图1-xx所示的两级分类。
（2）将“云市场”变成带下拉子类的效果。
图1-xx
（3）设计出如图1-xx所示的body布局。
参考答案如下：
<!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="layui/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="javascript:;">用户统计</a></dd>
</dl>
</li>
<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="javascript:;">用户统计</a></dd>
</dl>
</li>
<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="javascript:;">用户统计</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="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="javascript:;">用户统计</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<div style="padding: 10px;">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div style="background-color: red; height: 100px;">2</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: red; height: 210px">1</div>
</div>
<div class="layui-col-md8">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
<div class="layui-col-md4">
<div style="background-color: red; height: 100px;">1</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div style="background-color: red; height: 100px;">1</div>
</div>
<div class="layui-col-md6">
<div style="background-color: red; height: 100px;">1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="layui/layui.all.js"></script>
<script>
var element = layui.element;
</script>
</body>
</html>
运行效果如图1-xx所示。
