layui-页面布局

打酱油的；

已于 2024-07-26 16:08:28 修改

阅读量736

点赞数 2

分类专栏： layui 文章标签： html css 前端

于 2024-07-02 23:14:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46098612/article/details/140138587

版权

layui 专栏收录该内容

5 篇文章

订阅专栏

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的栅格系统进行响应式布局

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;LayUI Grid Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/css/layui.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="layui-container"&gt;
        &lt;div class="layui-row"&gt;
            &lt;div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3"&gt;1&lt;/div&gt;
            &lt;div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3"&gt;2&lt;/div&gt;
            &lt;div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3"&gt;3&lt;/div&gt;
            &lt;div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="layui-row"&gt;
            &lt;div class="layui-col-md6 layui-col-md-offset3"&gt;Centered Column&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/layui.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

这个示例展示了一个响应式布局，在不同设备上显示不同宽度的列，并且展示了如何使用偏移类来居中列。
希望这能帮助你理解LayUI的栅格布局系统！如果有任何问题或需要进一步的解释，请随时告诉我。