Layui栅格系统与后台框架布局
Posted zyxsblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layui栅格系统与后台框架布局相关的知识，希望对你有一定的参考价值。
一、栅格布局规则：
| 1. | 采用 layui-row 来定义行，如：<div class="layui-row"></div> |
| 2. | 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
|
| 3. | 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 |
| 4. | 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 |
| 5. | 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！ |
二、响应式规则：
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理
| 超小屏幕 (手机<768px) | 小屏幕 (平板≥768px) | 中等屏幕 (桌面≥992px) | 大型屏幕 (桌面≥1200px) | |
|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px |
| 标记 | xs | sm | md | lg |
| 列对应类 * 为1-12的等分数值 |
layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| 总列数 | 12 | |||
| 响应行为 | 始终按设定的比例水平排列 | 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 | ||
三、响应式公共类：
| 类名（class） | 说明 |
|---|---|
| layui-show-*-block | 定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg |
| layui-show-*-inline | 定义不同设备下的 display: inline; * 可选值同上 |
| layui-show-*-inline-block | 定义不同设备下的 display: inline-block; * 可选值同上 |
| layui-hide-* | 定义不同设备下的隐藏类，即： display: none; * 可选值同上 |
四、布局容器：
将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
五、列间距：
| 通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是： | |
| layui-col-space1 | 列之间间隔 1px |
| layui-col-space3 | 列之间间隔 3px |
| layui-col-space5 | 列之间间隔 5px |
| layui-col-space8 | 列之间间隔 8px |
| layui-col-space10 | 列之间间隔 10px |
| layui-col-space12 | 列之间间隔 12px |
| layui-col-space15 | 列之间间隔 15px |
| layui-col-space18 | 列之间间隔 18px |
| layui-col-space20 | 列之间间隔 20px |
| layui-col-space22 | 列之间间隔 22px |
| layui-col-space28 | 列之间间隔 28px |
| layui-col-space30 | 列之间间隔 30px |
六、列偏移：
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度
七、栅格嵌套：
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HelloWorld</title> 6 <style type="text/css"> 7 .b{ 8 background-color:pink; 9 } 10 .b2{ 11 background-color: green; 12 } 13 </style> 14 </head> 15 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css"> 16 <body> 17 <div class="layui-container"> 18 常规布局（以中型屏幕桌面为例）： 19 <div class="layui-row"> 20 <div class="layui-col-md9"> 21 <div class="b">你的内容 9/12</div> 22 </div> 23 <div class="layui-col-md3"> 24 <div class="b2">你的内容 3/12</div> 25 </div> 26 </div> 27 <div class="layui-row"> 28 <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 29 <div class="b2">移动：6/12 | 平板：6/12 | 桌面：4/12</div> 30 </div> 31 <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 32 <div class="b"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> 33 </div> 34 <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 35 <div class="b2">移动：4/12 | 平板：12/12 | 桌面：4/12</div> 36 </div> 37 <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 38 <div class="b">移动：4/12 | 平板：7/12 | 桌面：8/12</div> 39 </div> 40 <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 41 <div class="b2">移动：4/12 | 平板：5/12 | 桌面：4/12 </div> 42 </div> 43 </div> 44 <div class="layui-row layui-col-space10"> 45 <div class="layui-col-md4"> 46 <div class="b">1/3</div> 47 </div> 48 <div class="layui-col-md4"> 49 <div class="b2">1/3</div> 50 </div> 51 <div class="layui-col-md4"> 52 <div class="b">1/3</div> 53 </div> 54 </div> 55 <div class="layui-row layui-col-space5"> 56 <div class="layui-col-md5"> 57 <div class="layui-row grid-demo"> 58 <div class="layui-col-md3"> 59 <div class="b">内部列</div> 60 </div> 61 <div class="layui-col-md9"> 62 <div class="b2">内部列</div> 63 </div> 64 <div class="layui-col-md12"> 65 <div class="b">内部列</div> 66 </div> 67 </div> 68 </div> 69 <div class="layui-col-md7"> 70 <div class="layui-row grid-demo grid-demo-bg1"> 71 <div class="layui-col-md12"> 72 <div class="b2">内部列</div> 73 </div> 74 <div class="layui-col-md9"> 75 <div class="b">内部列</div> 76 </div> 77 <div class="layui-col-md3"> 78 <div class="b2">内部列</div> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 <script src="/LayuiTest/layui/layui.js"></script> 85 </body> 86 </html>
以上是关于Layui栅格系统与后台框架布局的主要内容，如果未能解决你的问题，请参考以下文章