LayUI 布局

概述

如你所愿,在 layui 2.0 的版本中,我们加入了强劲的栅格系统后台布局方案,这意味着你终于可以着手采用 layui 排版你的响应式网站后台系统了。layui 的栅格系统采用业界比较常见的 12 等分规则,内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理最低能支持到ie8。而你应当更欣喜的是,layui 终于开放了它经典的后台布局方案,快速搭建一个属于你的后台系统将变得十分轻松自如。

官网:https://www.layui.com/doc/element/layout.html

使用

样式

<style>
    .grid-demo {
        line-height: 50px;
        text-align: center;
        background-color: #79C48C;
        color: #fff;
    }
    .grid-demo-bg1 {
        background-color: #00F7DE;
    }
</style>

布局容器

layui-container 类

会随着屏幕大小改变成相应的宽度,响应式推荐使用

响应式布局容器 固定宽度

  • 大屏( >= 1200px ) 宽度为 1170px
  • 中屏( >= 992px ) 宽度为 970px
  • 小屏( >= 768px ) 宽度为 750px
  • 超小屏 ( 100% )
<body>

<div class="layui-container" style="background: #2aabd2">大数据男孩</div>

</body>

mark

layui-fluid 类

流式布局容器 任何屏幕大小都是百分百宽度,适用于单独的移动端

<body>

<div class="layui-fluid" style="background: #2aabd2">大数据男孩</div>

</body>

mark

栅格系统

栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理

- 超小屏幕(手机<768px) 小屏幕(平板≥768px) 中等屏幕(桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类* 为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 同前一个 同前一个
<!-- 中屏每个占 4 份 3 X 4 = 12 格 -->
<style>
    .grid-demo {
        padding: 10px;
        line-height: 50px;
        text-align: center;
        background-color: #79C48C;
        color: #fff;
    }
    .grid-demo-bg1 {
        background-color: #63BA79;
    }
</style>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 grid-demo" >大数据男孩</div>
        <div class="layui-col-md4 grid-demo-bg1" >大数据男孩</div>
        <div class="layui-col-md4 grid-demo" >大数据男孩</div>
    </div>
</div>

mark

列偏移

对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中* 号代表的是偏移占据的列数,可选中为1 - 12

如:layui-col-md-offset4,即代表在“中型桌面屏幕”下,让该列向右偏移 4 个列宽度

<div class="layui-container" >
    <div class="layui-row">
        <div class="layui-col-md4 grid-demo-bg1">大数据男孩</div>
        <div class="layui-col-md4 layui-col-md-offset4 grid-demo-bg1">大数据男孩</div>
    </div>
</div>

mark

列间距

通过“列间距”的预设类,来设定列之间的间距。且一行中·最左的列不会出现左边距最右的列不会出现右边距。可以设置 layui-col-space1 ~ layui-col-space30

<div class="layui-container">
    <!-- 间距 10 px -->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="grid-demo">大数据男孩</div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo">大数据男孩</div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo">大数据男孩</div>
        </div>
    </div>
</div>

响应式公共类

类名(class) 说明
layui-show-*-block 定义不同设备下的 display: block; *可选值有:xs、sm、md、lg
layui-show-*-inline 定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block 定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-* 定义不同设备下的隐藏类,即: display: none; * 可选值同上
<div class="layui-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="grid-demo">大数据男孩</div>
        </div>
        <!-- 中屏下隐藏 -->
        <div class="layui-col-md4 layui-hide-md">
            <div class="grid-demo">大数据男孩2</div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo">大数据男孩</div>
        </div>
    </div>
</div>

mark

发表评论 / Comment

用心评论~