LayUI-页面设计

2020-03-19

字数统计: 2.1k字 | 阅读时长≈ 10分钟

LayUI-页面设计

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

1. 快速上手

下载地址：

官网：https://www.layui.com/
CDN：https://www.layuicdn.com/#layui-v2.5.5
官方文档：https://www.layui.com/doc/

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

1 2	<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"> <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>

2. 栅格系统

在 layui 2.0 的版本中，加入了强劲的栅格系统和后台布局方案，这意味着终于可以着手采用 layui 排版你的响应式网站和后台系统了。
layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。

栅格布局规则：

采用 layui-row 来定义行，如：``
采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。官方文档
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

布局容器：

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

<div class="layui-container">
  <div class="layui-row">
 ……
  </div>
</div>

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

<div class="layui-container">
 <div class="layui-fluid">
       ……
 </div>  
</div>

列间距和偏移：

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。layui-col-space[1~12]
对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12

<div class="layui-row layui-col-space10">
  <div class="layui-col-md4">
    1/3
  </div>
  <div class="layui-col-md4  layui-col-md-offset4">
    1/3
  </div>
</div>

栅格嵌套:

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

2.1 完整代码小结

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Zhuuu</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">

</head>
<body>

<h1 style="text-align: center">Zhuuu</h1>

<hr>

<div class="layui-container">

    <!--等比例水平排列-->
    <div class="layui-row">
        <div class="layui-col-md6">
            <div style="background-color: yellow">6/12</div>
        </div>
        <div class="layui-col-md6">
            <div style="background-color: green">6/12</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: blueviolet">3/12</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: green">3/12</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: blueviolet">3/12</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: green">3/12</div>
        </div>
    </div>

    <hr>
    <!--响应式设计-->
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="layui-bg-blue">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="layui-bg-red">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="layui-bg-blue">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="layui-bg-green">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="layui-bg-black">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
        </div>
    </div>

    <hr>
    <!--列间隔-->
    <div class="layui-row layui-col-space1">
        <div class="layui-col-md3">
            <div class="layui-bg-blue">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-bg-blue">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-bg-blue">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-bg-blue">1/4</div>
        </div>
    </div>

    <hr>
    <!--列偏移-->
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-bg-red">4/12</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="layui-bg-red">偏移4列</div>
        </div>
        <div class="layui-col-md1 layui-col-md-offset5">
            <div class="layui-bg-red">偏移5列</div>
        </div>
        <div class="layui-col-md1">
            <div class="layui-bg-red">不偏移</div>
        </div>
    </div>

    <hr>
    <!--栅格嵌套-->
    <div class="layui-row">
        <div class="layui-col-md5">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="layui-bg-green">内部列</div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-bg-red">内部列</div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-bg-blue">内部列</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-row grid-demo grid-demo-bg1">
                <div class="layui-col-md12">
                    <div class="layui-bg-green">内部列</div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-bg-red">内部列</div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-bg-blue">内部列</div>
                </div>
            </div>
        </div>
    </div>

</div>

<hr>

<!--流体容器（宽度自适应，不固定）-->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm3">
            <div class="layui-bg-red">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-blue">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-red">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-bg-blue">25%</div>
        </div>
    </div>
</div>


<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
<script>

</script>
</body>
</html>

显示效果如下：

3. 颜色

[官方文档][https://www.layui.com/doc/element/color.html]

内置的背景色CSS类

layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等

打赏

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！