<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统</title>
<!--LayUI的核心css文件-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<!--LayUI的核心js文件-->
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
栅格系统
列组合
1.定义行 .layui-row
2.定义列 .layui-col-md*
md 表示不同屏幕的标识(xs sm md lg)
* 表示列数量
3.每一行均分为12列，列的总数不能超过12，否则会自动换行
4.响应式规则
栅格会自动根据屏幕分辨率选择对应的样式效果
列边距
.layui-col-space*
* 代表的式px值(1~30)
列偏移
将列向右移动指定列数
.layui-col-md-offset*
* 代表的是列数
列嵌套
列之间可以无限嵌套列
-------------------------------------------------------------------------
|超小屏幕 |小屏幕 |中等屏幕 |大型屏幕
|(手机<768px) |(平板>=768px) |(桌面>=992px) |(桌面>=1200px)
--------------------------------------------------------------------------
.layui- |auto |750px |970px |1170px
container |
的值 |
--------------------------------------------------------------------------
标记 |xs |sm |md |lg
--------------------------------------------------------------------------
列对应类* |layui-col-xs* |layui-col-sm*|layui-col-md* |layui-col-lg*
为1-12的 |
等分的值 |
--------------------------------------------------------------------------
总列数 |12 |12 |12 |12
--------------------------------------------------------------------------
响应行为 |始终按设定的比 |在当前屏幕下水 |在当前屏幕下水平|在当前屏幕下水平
|例水平排列 |平排列，如果屏 |排列，如果屏幕大|排列，如果屏幕大
| |幕大小低于临界 |小低于临界则堆叠|小低于临界则堆叠
| |则堆叠排列 | 排列 |排列
--------------------------------------------------------------------------
-->
<!--布局容器-->
<div class="layui-container">
<!--定义行-->
<div class="layui-row">
<!--定义列-->
<div class="layui-col-md5" style="background-color: rgb(130, 215, 243);">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: rgb(44, 141, 173);">
内容7/12
</div>
</div>
<!--定义行-->
<div class="layui-row">
<!--定义列-->
<div class="layui-col-md4" style="background-color: rgb(6, 126, 18);">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: rgb(116, 180, 122);">
内容4/12
</div>
</div>
</div>
<hr>
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4" style="background-color:thistle">
平板>=768px:6/12 | 桌面>=992px: 4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6" style="background-color: rgb(28, 104, 107);">
平板>=768px:4/12 | 桌面>=992px: 6/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8" style="background-color: rgb(201, 32, 130);">
平板>=768px:12/12 | 桌面>=992px: 8/12
</div>
</div>
<hr>
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4" >
<div style="background-color:rgb(189, 139, 247)">4</div>
</div>
<div class="layui-col-md4" >
<div style="background-color:rgb(134, 39, 197)">5</div>
</div>
<div class="layui-col-md4" >
<div style="background-color:rgb(116, 19, 243)">6</div>
</div>
</div>
<hr>
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" >
<div style="background-color:rgb(247, 240, 139)">4</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4" >
<div style="background-color:rgb(163, 180, 6)">向右移动4个位置</div>
</div>
</div>
<hr>
<h3>列嵌套</h3>
<div class="layui-row">
<div class="layui-col-md6" >
<div style="background-color:rgb(247, 240, 139)">
<div class="layui-row">
<div class="layui-col-md3" style="background-color:rgb(248, 149, 118)">内部列</div>
<div class="layui-col-md5" style="background-color:rgb(207, 250, 166)">内部列</div>
<div class="layui-col-md4" style="background-color:rgb(133, 248, 181)">内部列</div>
</div>
</div>
</div>
</div>
</body>
</html>