全面解析layui：掌握基础知识与实用技能（1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框；1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单）

<!-- 使用按钮组件 -->
<button class="layui-btn">按钮</button>
<!-- 使用表单组件 -->
<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>
</form>

<!-- 使用容器 -->
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md6">50%宽度</div>
    <div class="layui-col-md6">50%宽度</div>
  </div>
</div>

// 弹出层
layui.use('layer', function(){
  var layer = layui.layer;
  layer.msg('Hello World');
});
// 提示框
layui.use('layer', function(){
  var layer = layui.layer;
  layer.alert('内容', {icon: 1});
});

<!-- 数据表格 -->
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>姓名</th>
      <th>城市</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>浙江杭州</td>
      <td>人生就像是一场修行</td>
    </tr>
  </tbody>
</table>

// 表单验证
layui.use('form', function(){
  var form = layui.form;
  form.verify({
    username: function(value, item){
      if(!value) {
        return '请输入用户名';
      }
    }
  });
});
// 表单提交
layui.use('form', function(){
  var form = layui.form;
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

<!-- 图片轮播 -->
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 导航菜单 -->
<ul class="layui-nav">
  <li class="layui-nav-item"><a href="">首页</a></li>
  <li class="layui-nav-item"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">服务</a></li>
</ul>