• 章节:20
  • 访问:555
  • 时长:00:06:24
  • 日期:2020-06-10 08:22

为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。

我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="layui/css/layui.css" rel="stylesheet" />
</head>
<body>

    <div class="layui-fluid">
        常规布局(以中型屏幕桌面为例):
        <div class="layui-row  layui-col-space10">
            <div class="layui-col-md9">
                你的内容 9/12
            </div>
            <div class="layui-col-md3">
                你的内容 3/12
            </div>
        </div>

        移动设备、平板、桌面端的不同表现:
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动:6/12 | 平板:6/12 | 桌面:4/12
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动:6/12 | 平板:6/12 | 桌面:4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                移动:4/12 | 平板:12/12 | 桌面:4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
                移动:4/12 | 平板:7/12 | 桌面:8/12
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
                移动:4/12 | 平板:5/12 | 桌面:4/12
            </div>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>
</html>