1.LayUI 栅格系统概述
LayUI 的栅格系统基于12列网格,允许你通过设置不同的类名来控制列的宽度和响应式布局。栅格系统的主要组成部分包括容器、行和列。
基本结构
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">1</div>
</div>
</div>
1.layui-container: 容器类,用于包裹栅格系统,使其居中并设置最大宽度。
2.layui-row: 行类,用于包裹列。
3.layui-col-md12: 列类,表示在中等设备及以上设备(屏幕宽度≥992px)上,这一列占用全部12列的宽度。
响应式类
LayUI 提供了多个响应式类名,通过不同设备的屏幕宽度来控制列的宽度:
4.layui-col-xs:超小屏幕(屏幕宽度<768px)手机
5.layui-col-sm:小屏幕(屏幕宽度≥768px)
6.layui-col-md:中等屏幕(屏幕宽度≥992px)
7.layui-col-lg:大屏幕(屏幕宽度≥1200px)
例如:
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">1</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">2</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">3</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">4</div>
</div>
</div>
在这个例子中,每一列在不同设备上的宽度如下:
8.超小屏幕:每列占据12列宽度(100%宽度)
9.小屏幕:每列占据6列宽度(50%宽度)
10.中等屏幕:每列占据4列宽度(33.33%宽度)
11.大屏幕:每列占据3列宽度(25%宽度)
偏移列
通过偏移类,可以在栅格布局中创建空白列,例如:
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">1</div>
</div>
</div>
12.layui-col-md-offset3: 表示在中等设备及以上设备上,这一列前面会有3列的空白,实际内容占据6列宽度(总共占据9列)。
组合使用
你可以自由组合不同的列宽和偏移类,以实现复杂的布局需求,例如:
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">1</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-md-offset4">2</div>
</div>
</div>在这个例子中,第二列在中等屏幕及以上设备上向右偏移了4列。
示例代码:
下面是一个完整的示例,展示了如何使用LayUI的栅格系统进行响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LayUI Grid Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">1</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">2</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">3</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">4</div>
</div>
<div class="layui-row">
<div class="layui-col-md6 layui-col-md-offset3">Centered Column</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/layui.js"></script>
</body>
</html>
这个示例展示了一个响应式布局,在不同设备上显示不同宽度的列,并且展示了如何使用偏移类来居中列。
希望这能帮助你理解LayUI的栅格布局系统!如果有任何问题或需要进一步的解释,请随时告诉我。
文章评论