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

猜你喜欢

转载自www.cnblogs.com/chenting-personal/p/12054691.html
今日推荐