基础概念
layui-col-xs | 用于非常小的屏幕，通常是手机屏幕（屏幕宽度小于768px）。xs代表"extra small"。 |
layui-col-sm | 用于小屏幕，如平板设备（屏幕宽度在768px到992px之间）。sm代表"small"。 |
layui-col-md | 用于中等屏幕，如桌面显示器（屏幕宽度在992px到1200px之间）。md代表"medium"。 |
layui-col-lg | 用于大屏幕，如大桌面显示器（屏幕宽度大于1200px）。lg代表"large"。 |
栅格布局优势
用例：使用layui实现下图界面布局（此处使用vs作为编译器）：
操作流程：
步骤1. | 步骤2.
|
步骤3. | 步骤4. |
步骤5. | |
步骤4代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="shanGeBuJu.aspx.cs" Inherits="shanGeBuJu.shanGeBuJu" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%--引入css样式--%>
<link href="layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<%--引入js样式--%>
<script src="layui.layui.js"/>
</body>
</html>
步骤5代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="shanGeBuJu.aspx.cs" Inherits="shanGeBuJu.shanGeBuJu" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%--引入css样式--%>
<link href="layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<%--引用layui的表单样式--%>
<form id="form1" runat="server" class="layui-form">
<div class="layui-row;" style="height:150px; background-color:gray">
<div>
<%--此行为空行，留出上部空白行,为方便查看使用灰色背景填充--%>
</div>
</div> <%--第一行结束--%>
<div class="layui-row;" style=" height:50px;">
<div class="layui-col-md8 layui-col-md-offset2" style="height:50px; background-color:tomato"> <%--此列占整行的十二分之八，向右偏移两行--%>
</div> <%--搜索框列结束--%>
</div> <%--第二行结束（搜索框行）--%>
<div class="layui-row;" style="height:100px; background-color:gray">
<div>
<%--此行为空行，留出空白行,为方便查看使用灰色背景填充--%>
</div>
</div> <%--第三行结束--%>
<div class="layui-row layui-col-space30" style="height:100px; background-color:white"> <%--此处的col-space为设置列间距--%>
<div class="layui-col-md4 layui-col-md-offset2" style="height:250px;"> <%--此列占整行的十二分之四，用作大图标，向右偏移两行--%>
<div style="background-color:tomato; height:250px">
大图标
</div> <%--大图标单元格结束--%>
</div>
<div class="layui-col-md1 " style="height:250px;"> <%--此列占整行的十二分之一，用作小图标--%>
<div style="background-color:tomato;height:250px">
小图标01
</div> <%--小图标单元格结束--%>
</div> <%--小图标行结束--%>
<div class="layui-col-md1 " style="height:250px;"> <%--此列占整行的十二分之一，用作小图标--%>
<div style="background-color:tomato;height:250px">
小图标02
</div> <%--小图标单元格结束--%>
</div> <%--小图标行结束--%>
<div class="layui-col-md1 " style="height:250px;"> <%--此列占整行的十二分之一，用作小图标--%>
<div style="background-color:tomato;height:250px">
小图标03
</div> <%--小图标单元格结束--%>
</div> <%--小图标行结束--%>
</div> <%--第四行结束(图表行)--%>
</form>
<%--引入js样式--%>
<script src="layui.layui.js"/>
</body>
</html>
