layUi 与 bootstrap 的响应式 栅格系统等同

admin

在 LayUi 中 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

1. <div class="layui-container">  
2.   常规布局（以中型屏幕桌面为例）：
3.   <div class="layui-row">
4.     <div class="layui-col-md9">
5.       你的内容 9/12
6.     </div>
7.     <div class="layui-col-md3">
8.       你的内容 3/12
9.     </div>
10.   </div>
11.    
12.   移动设备、平板、桌面端的不同表现：
13.   <div class="layui-row">
14.     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
15.       移动：6/12 | 平板：6/12 | 桌面：4/12
16.     </div>
17.     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
18.       移动：6/12 | 平板：6/12 | 桌面：4/12
19.     </div>
20.     <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
21.       移动：4/12 | 平板：12/12 | 桌面：4/12
22.     </div>
23.     <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
24.       移动：4/12 | 平板：7/12 | 桌面：8/12
25.     </div>
26.     <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
27.       移动：4/12 | 平板：5/12 | 桌面：4/12
28.     </div>
29.   </div>
30. </div>

复制代码

admin

1. layui-show-*-block        定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
2. layui-show-*-inline        定义不同设备下的 display: inline; * 可选值同上
3. layui-show-*-inline-block        定义不同设备下的 display: inline-block; * 可选值同上
4. layui-hide-*        定义不同设备下的隐藏类，即： display: none; * 可选值同上

复制代码

隐藏与显示

admin

栅格系统的容器

1. <div class="layui-container">
2.   <div class="layui-row">
3.     ……
4.   </div>
5. </div>      

复制代码

下一个为100% 宽 与boot等同

1. <div class="layui-fluid">
2.   ……
3. </div>      

复制代码

admin

列间距  (最左侧不会有间距 )

1. <div class="layui-row layui-col-space10">
2.   <div class="layui-col-md4">
3.     1/3
4.   </div>
5.   <div class="layui-col-md4">
6.     1/3
7.   </div>
8.   <div class="layui-col-md4">
9.     1/3
10.   </div>
11. </div>

复制代码

此间距为10

admin

嵌套注意： 在嵌套时 与boot 等同 在 layui-row 下嵌套  而不是 在上一级的容器下嵌套