layui栅格系统如何实现响应式布局,layui栅格示例,layui栅格说明文档,layui栅格系统开发文档

layui栅格

我们通过layui示例可以了解到,我们可以采用 layui上个系统 排版你的响应式网站和后台管理系统的界面,layui 的栅格采用业界比较常见的 12 等分规,内置手机、平板、PC 桌面中大型屏幕的多终端适配处理,最低能支持到 ie8,本文章着重介绍了,layui框架栅格系统的使用、layui栅格示例以及说明文。

ui框架栅格系统

在layui栅格系统中,它提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局, 你的内容就可以放入这些创建好的布局中,layui 栅格系统的步骤:

栅格系统说明文档

栅格系统的书写格式,当layui-containr换为layui-fluid时,它的布局分别是固定宽度和百分比宽度

layui

layui是一套完全免费的ui框架

layui栅格示例

可用于响应式排版,移动端或者电脑端相应操作

layui栅格说明文档

注意:下述演示中的颜色只是做一个区分作用,并非栅格内置。
始终等比例水平排列
6/12
6/12
3/12
3/12
3/12
3/12
移动设备、桌面端的组合响应式展现
移动:12/12、桌面:8/12
移动:6/12、桌面:4/12
移动:6/12、桌面:12/12
移动设备、平板、桌面端的复杂组合响应式展现
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:4/12 | 平板:12/12 | 桌面:4/12
移动:4/12 | 平板:7/12 | 桌面:8/12
移动:4/12 | 平板:5/12 | 桌面:4/12
常规布局:从小屏幕堆叠到桌面水平排列
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
75%
25%
33.33%
33.33%
33.33%
50%
50%
列间隔
1/4
1/4
1/4
1/4
1/3
1/3
1/3
9/12
3/12
7/12
5/12
7/12
5/12
列偏移
4/12
偏移4列
偏移5列
不偏移
偏移3列
偏移1列
栅格嵌套
内部列
内部列
内部列
内部列
内部列
内部列
流体容器(宽度自适应,不固定)
25%
25%
25%
25%
更多我们未能呈现的示例,还有待您在阅读文档、以及不断使用的过程,去深入挖掘。