• layUI学习第四日:layUI布局系列一


    1.栅格布局规则

      1.1 layui-row定义行,如:<div class="layui-row"></div>

      1.2 layui-col-md*这样的预设来定义列,如:<div class="layui-col-md9"></div>,定义一组列(column),且放在行(row)内。

        变量md 代表的是不同屏幕下的标记,列可以同时出现最多四种不同的组合。

        分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)

      1.3 变量* 代表的是该列所占用的12等分数,可选值为 1 - 12。如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。

    2.响应式规则

     3.响应式公共类

    4. 布局容器

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

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

    5.列间距

      通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。预设了 12 种不同尺寸的边距。

      layui-col-spaceX(X的值可为:1、3、5、8、10、12、15、18、20、22、28、30),X表示列之间间隔 Xpx。

      如:<div class="layui-row layui-col-space10"></div>表示列之间的间距为10

  • 相关阅读:
    大二暑假学习第一周
    PyQt5+pycharm 中对生成的.py文件无法运行的问题
    尚筹网19总结
    尚筹网19项目部署
    MAC远程连接Linux
    尚筹网17订单、支付
    尚筹网16确认回报、订单
    支付宝沙箱环境
    内网穿透
    支付宝开发平台使用
  • 原文地址:https://www.cnblogs.com/chenting-personal/p/12054691.html
Copyright © 2020-2023  润新知