layui响应式布局教程

1、第一步：新建一个layui的页面，引入layui.js和layui.css，如图：

2、第二步：响应式布局，页面平分，代码如下：

<div class="layui-row">

 

   <div class="layui-col-xs6">

 

       <div class="grid-demo grid-demo-bg1">6/12</div>

 

   </div>

 

   <div class="layui-col-xs6">

 

       <div class="grid-demo">6/12</div>

 

   </div>

 

</div>

3、第三步：运行上面的代码，可以发现页面被平分了，如图：

4、第四步：移动设备、平板、桌面端的复杂组合响应式展现，代码如下：

<div class="layui-row">

 

   <div class="layui-col-xs12 layui-col-md8">

 

       <div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>

 

   </div>

 

   <div class="layui-col-xs6 layui-col-md4">

 

       <div class="grid-demo">移动：6/12、桌面：4/12</div>

 

   </div>

 

   <div class="layui-col-xs6 layui-col-md12">

 

       <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>

 

   </div>

 

</div>

5、第五步：运行上面的代码，可以看到效果，如图：

6、第六步：在响应式布局的时候，有时候还需要控制列间隔，代码如下：

<div class="layui-row layui-col-space1">

 

   <div class="layui-col-md3">

 

       <div class="grid-demo grid-demo-bg1">1/4</div>

 

   </div>

 

   <div class="layui-col-md3">

 

       <div class="grid-demo">1/4</div>

 

   </div>

 

   <div class="layui-col-md3">

 

       <div class="grid-demo grid-demo-bg1">1/4</div>

 

   </div>

 

   <div class="layui-col-md3">

 

       <div class="grid-demo">1/4</div>

 

   </div>

 

</div>

7、第七步：运行上面的代码，可以看到效果，如图：

8、第八步：layui响应式布局还有很多，可以参照官网文档