三、布局系统与栅格

Layui提供了灵活实用的布局系统，帮助开发者快速搭建页面结构。它主要包括响应式容器和强大的栅格系统。

3.1 容器
在开始布局之前，需要一个容器来包裹内容。Layui提供了两种容器：
固定宽度容器 layui-container：在大屏幕（≥1200px）下宽度固定为1170px，在平板和手机端自动适配，通常用于官网、文章展示页。
自适应宽度容器 layui-fluid：宽度始终为屏幕宽度的100%，通常用于后台管理系统的主内容区域。

<!-- 固定宽度容器 -->
<div class="layui-container">
  内容区域
</div>

<!-- 全屏宽度容器 -->
<div class="layui-fluid">
  内容区域
</div>

3.2 栅格系统
Layui的栅格系统采用传统的12等分布局，通过行（layui-row）和列（layui-col-*）的组合来创建页面布局。

3.2.1 基础栅格

<div class="layui-container">
  <div class="layui-row">
    <!-- 占用 6/12 即 50% 宽度 -->
    <div class="layui-col-md6">
      左侧内容
    </div>
    <!-- 占用 6/12 即 50% 宽度 -->
    <div class="layui-col-md6">
      右侧内容
    </div>
  </div>
</div>

3.2.2 响应式支持
Layui栅格支持四种设备宽度，通过不同的后缀来控制不同屏幕下的显示比例：

示例：手机全屏显示，平板及以上显示两列

<div class="layui-row">
  <div class="layui-col-xs12 layui-col-sm6">
    在手机上占满整行，平板上占一半
  </div>
  <div class="layui-col-xs12 layui-col-sm6">
    在手机上占满整行，平板上占一半
  </div>
</div>

更复杂的响应式示例：手机1列，平板2列，桌面3列

<div class="layui-row">
  <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
    商品卡片1
  </div>
  <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
    商品卡片2
  </div>
  <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
    商品卡片3
  </div>
  <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
    商品卡片4
  </div>
</div>

3.2.3 列偏移
使用layui-col-md-offset*可以在右侧产生空白偏移，实现内容的水平居中或错落布局。

<!-- 水平居中 -->
<div class="layui-row">
  <!-- 向左偏移 4 个栅格，再占据 4 个栅格，实现水平居中 -->
  <div class="layui-col-md4 layui-col-md-offset4">
    居中的内容
  </div>
</div>

<!-- 错落布局 -->
<div class="layui-row">
  <div class="layui-col-md4">内容1</div>
  <div class="layui-col-md4 layui-col-md-offset4">内容2（靠右）</div>
</div>

3.2.4 列间距
使用layui-col-space*设置列与列之间的间距，支持1-30px。由于栅格采用内边距实现间距，如果列有背景色，通常需要在内部再嵌套一个元素来显示背景。

<!-- 间距为20px的卡片网格 -->
<div class="layui-row layui-col-space20">
  <div class="layui-col-md6">
    <!-- 此处需要嵌套 div 来显示背景或边框 -->
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px;">
      卡片内容1
    </div>
  </div>
  <div class="layui-col-md6">
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px;">
      卡片内容2
    </div>
  </div>
</div>

3.2.5 栅格嵌套
栅格系统支持无限嵌套，可以在列中再次嵌套行和列。

<div class="layui-row">
  <div class="layui-col-md6">
    <!-- 左侧主区域 -->
    <div class="layui-row">
      <div class="layui-col-md6">子列1</div>
      <div class="layui-col-md6">子列2</div>
    </div>
  </div>
  <div class="layui-col-md6">
    右侧区域
  </div>
</div>

四、基础元素与视觉

在开始使用复杂的交互模块之前，Layui提供了一套完整的基础CSS元素，用来构建页面的视觉骨架。

4.1 按钮
Layui的按钮样式丰富，只需为button、a等元素添加layui-btn类即可。它还提供了多种主题色和尺寸。

<!-- 基础按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

<!-- 不同尺寸 -->
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>

<!-- 圆角按钮 -->
<button class="layui-btn layui-btn-radius">圆角按钮</button>

<!-- 流体按钮（占满父容器宽度） -->
<button class="layui-btn layui-btn-fluid">流体按钮</button>

<!-- 图标按钮 -->
<button class="layui-btn">
  <i class="layui-icon layui-icon-home"></i> 首页
</button>

<!-- 只带图标的按钮 -->
<button class="layui-btn layui-btn-primary">
  <i class="layui-icon layui-icon-delete"></i>
</button>

<!-- 按钮组 -->
<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">编辑</button>
  <button class="layui-btn">删除</button>
</div>

4.2 图标
Layui内置了大量图标（Layui 2.8版本后新增了18个），使用layui-icon类即可调用。图标采用字体方式渲染，可以随意改变颜色和大小。

<!-- 基础图标 -->
<i class="layui-icon layui-icon-face-smile"></i>

<!-- 带文字的图标链接 -->
<a href="javascript:;" class="layui-btn layui-btn-primary">
  <i class="layui-icon layui-icon-delete"></i> 删除
</a>

<!-- 调整图标大小（通过CSS） -->
<i class="layui-icon layui-icon-home" style="font-size: 30px; color: #16baaa;"></i>

<!-- 常用图标示例 -->
<i class="layui-icon layui-icon-loading"></i>  <!-- 加载图标 -->
<i class="layui-icon layui-icon-ok-circle"></i> <!-- 成功图标 -->
<i class="layui-icon layui-icon-close"></i>      <!-- 关闭图标 -->
<i class="layui-icon layui-icon-edit"></i>       <!-- 编辑图标 -->
<i class="layui-icon layui-icon-add-1"></i>      <!-- 添加图标 -->
<i class="layui-icon layui-icon-search"></i>     <!-- 搜索图标 -->

4.3 表单
表单是后台管理系统中的核心元素。Layui的表单模块form负责管理输入框、下拉框、单选框、复选框和开关等组件。重要提示：所有表单项必须放在具有class="layui-form"的容器内，否则样式和事件将不生效。
4.3.1 输入框

<form class="layui-form" action="">
  <!-- 普通输入框 -->
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required lay-verify="required" 
             placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

  <!-- 带前缀/后缀的输入框 -->
  <div class="layui-form-item">
    <label class="layui-form-label">金额</label>
    <div class="layui-input-inline" style="width: 200px;">
      <input type="text" name="price" placeholder="¥" class="layui-input">
    </div>
    <div class="layui-form-mid">元</div>
  </div>

  <!-- 带搜索的下拉框 -->
  <div class="layui-form-item">
    <label class="layui-form-label">城市</label>
    <div class="layui-input-block">
      <select name="city" lay-search>
        <option value="">请选择</option>
        <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="020">广州</option>
        <option value="0755">深圳</option>
      </select>
    </div>
  </div>

  <!-- 开关 -->
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭">
    </div>
  </div>

  <!-- 滑块 -->
  <div class="layui-form-item">
    <label class="layui-form-label">音量</label>
    <div class="layui-input-block">
      <input type="text" name="volume" lay-filter="volume" class="layui-input">
    </div>
  </div>

  <!-- 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
layui.use(['form', 'slider'], function(){
  var form = layui.form;
  var slider = layui.slider;

  // 滑块初始化
  slider.render({
    elem: '#sliderTest',
    min: 0,
    max: 100
  });

  // 监听提交事件
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false; // 阻止页面跳转
  });
});
</script>

4.3.2 表单验证
Layui内置了lay-verify属性用于表单验证，常见值有：

<div class="layui-form-item">
  <label class="layui-form-label">手机号</label>
  <div class="layui-input-block">
    <input type="text" name="phone" lay-verify="required|phone" 
           placeholder="请输入手机号" class="layui-input">
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">邮箱</label>
  <div class="layui-input-block">
    <input type="text" name="email" lay-verify="email" 
           placeholder="请输入邮箱" class="layui-input">
  </div>
</div>

来源：
https://hllft.cn/category/software-apps.html