layui html模块化,模块化前端框架的Layui使用(三)之后台布局与栅格系统

本文介绍了layui框架中的栅格系统,包括布局规则、响应式设计、公共类、容器使用、列间距与偏移及栅格嵌套等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

其实这章没啥好讲,直接拿它的示例改改就好。其实一开始我会选择使用layui也是因为它的后台布局比较好看。

后台布局

layout 后台大布局 - Layui
内容主体区域

//JavaScript代码区域

layui.use('element', function(){

var element = layui.element;

});

b0242e8f840a

后台布局效果.png

挑几个重点来说吧

有些下拉动画效果是需要加载element模块的,如果没有加载的话就没有动画效果了。

//JavaScript代码区域

layui.use('element', function(){

var element = layui.element;

});

例如下面这个基本资料的和安全设置的下拉效果就要加载element模块才能实现

文本文件病历管理

全部记录
未处理记录
已处理记录

layui-nav-itemed就是显示展开的效果

class="layui-this"就显示当前被选中的效果

如下图

b0242e8f840a

一级导航展开,二级菜单被选中的效果.png

栅格系统

为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

一、栅格布局规则:

1. 采用 layui-row 来定义行,如:

2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:

变量md 代表的是不同屏幕下的标记(可选值见下文)

变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12

如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。

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

4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

b0242e8f840a

示例.png

常规布局(以中型屏幕桌面为例):

你的内容 9/12

你的内容 3/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

二、响应式规则:

栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理

b0242e8f840a

不同的屏幕

三、响应式公共类:

b0242e8f840a

样式.png

四、布局容器:

将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。

……

当然,你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应

……

五、列间距:

通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:

b0242e8f840a

i列间距样式.png

下面是一个简单的例子,列间距为10px:

b0242e8f840a

列间距为10px的效果.png

1/3

1/3

1/3

如果需要的间距高于30px(一般不常见),请采用偏移,下文继续讲解

六、列偏移:

对列追加 类似layui-col-md-offset的预设类,从而让列向右偏移。其中号代表的是偏移占据的列数,可选中为 1 - 12。

如:layui-col-md-offset3*,即代表在“中型桌面屏幕”下,让该列向右偏移3个列宽度

下面是一个采用“列偏移”机制让两个列左右对齐的实例

b0242e8f840a

右偏移3个列宽度效果.png

4/12

偏移4列,从而在最右

请注意,列偏移可针对不同屏幕的标准进行设定,比如上述的例子,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。

七、栅格嵌套:

理论上,你可以对栅格进行无穷层次的嵌套,这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素(layui-col-md*)中插入一个行元素(layui-row),即可完成嵌套。下面是一个简单的例子:

b0242e8f840a

栅格嵌套.png

内部列

内部列

内部列

内部列

内部列

内部列

参考文章:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值