layui 官网：www.layui.com/
想去官网看看是什么鬼 下载下来玩玩
官方目录：
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
一 、导入有两种方式：
-
模块化导入
-
./layui/css/layui.css
-
./layui/layui.js
-
-
非模块化导入 （后端习惯用这种方式）
-
./layui/css/layui.css
-
./layui/layui.all.js
-
使用：
console.log(layui)//引用之后会存在这个对象
layui.layer.confirm('这个是confirm方法')
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
</body>
<script src="./layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，直接使用即可：
// console.dir()可以显示一个对象所有的属性和方法。
console.log(layui)//引用之后会存在这个对象
layui.layer.msg('这个是msg方法')
layui.layer.confirm('这个是confirm方法')
console.log(layui.layer);
layui.layer.alert('这个是alert小框框')
</script>
</html>
二、栅栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<!-- 十二等分 -->
<div class="layui-row">
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<!-- 多余的 会跳到下一行 -->
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
</div>
<!-- 六等分 -->
<div class="layui-row">
<div class="layui-col-md2">中等屏幕</div>
<div class="layui-col-md2">中等屏幕</div>
<div class="layui-col-md2">中等屏幕</div>
<div class="layui-col-md2">中等屏幕</div>
<div class="layui-col-md2">中等屏幕</div>
<div class="layui-col-md2">中等屏幕</div>
</div>
<!-- 四等分 -->
<div class="layui-row">
<div class="layui-col-md3">中等屏幕</div>
<div class="layui-col-md3">中等屏幕</div>
<div class="layui-col-md3">中等屏幕</div>
<div class="layui-col-md3">中等屏幕</div>
</div>
<!-- 三等分 -->
<div class="layui-row">
<div class="layui-col-md4">中等屏幕</div>
<div class="layui-col-md4">中等屏幕</div>
<div class="layui-col-md4">中等屏幕</div>
</div>
<!-- 二等分 -->
<div class="layui-row">
<div class="layui-col-md6">中等屏幕</div>
<div class="layui-col-md6">中等屏幕</div>
</div>
<!-- 一等分 -->
<div class="layui-row">
<div class="layui-col-md12">中等屏幕</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
列偏移：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<h2>学习栅栏布局</h2>
<hr>
<!-- 十二等分 -->
<div class="layui-row">
<!--
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div> -->
<div class="layui-col-md1 layui-col-md-offset3" >中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
<div class="layui-col-md1">中等屏幕</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
三.颜色
layui上没有的颜色可以在这里查到： web安全色网站：www.bootcss.com/p/websafeco…
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<h2>学习栅栏布局</h2>
<hr>
<!-- 十二等分 -->
<div class="layui-row">
<div class="layui-col-md1 layui-bg-red">赤色：class="layui-bg-red"</div>
<div class="layui-col-md1 layui-bg-orange">橙色：class="layui-bg-orange"</div>
<div class="layui-col-md1 layui-bg-green">墨绿：class="layui-bg-green"</div>
<div class="layui-col-md1 layui-bg-cyan" >藏青：class="layui-bg-cyan"</div>
<div class="layui-col-md1 layui-bg-black">雅黑：class="layui-bg-black"</div>
<div class="layui-col-md1 layui-bg-gray">银灰：class="layui-bg-gray"</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<h2>学习栅栏布局</h2>
<hr>
<!-- 十二等分 -->
<div class="layui-row">
<div class="layui-col-md1 geer2-md-yellow ">geer2-md-yellow</div>
<div class="layui-col-md1 geer2-md-orange">geer2-md-orange</div>
<div class="layui-col-md1 geer2-md-skyblue">geer2-md-skyblue</div>
<div class="layui-col-md1 geer2-md-deepblue ">geer2-md-deepblue</div>
<div class="layui-col-md1 geer2-md-deeepgreen ">geer2-md-deeepgreen</div>
<div class="layui-col-md1 geer2-md-green">geer2-md-green</div>
<div class="layui-col-md1 geer2-md-huise">geer2-md-huise</div>
<div class="layui-col-md1 geer2-md-blue">geer2-md-blue</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
三、图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div {
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<h2>学习图标</h2>
<hr>
<div class="layui-icon layui-icon-face-smile" style="font-size: 30px ;color:red;"></div>
<div class="layui-icon layui-icon-ios" style="font-size: 30px ;color:blue"></div>
<!-- 出现两个苹果 -->
<div class="layui-icon layui-icon-ios"></div>
<hr>
<!-- （一般推荐用 i标签） -->
<i class="layui-icon layui-icon-login-wechat" style="font-size: 30px ;color:green;"></i>
<i class="layui-icon" style="font-size: 30px ;color:red;"></i>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
这里有很多的图标
- Iconfont-阿里巴巴矢量图标库：www.iconfont.cn/
四、按钮
class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div {
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<h2>class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格</h2>
<hr>
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<hr>
<h3>主题</h3>
<hr>
<button class="layui-btn layui-btn-primary">原始"</button>
<button class="layui-btn layui-btn">默认"</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>
<hr>
<h3>尺寸</h3>
<h5>lg 大型 sm小型 xs迷你</h5>
<hr>
<button class="layui-btn layui-btn-lg">大型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>
<h3>最大自适应</h3>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
<hr>
<h3>圆角</h3>
<button class="layui-btn layui-btn-radius layui-btn-danger">警告</button>
<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭</button>
<hr>
<h3>图标嵌套在按钮中</h3>
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius" style="font-size: 20px">
<i class="layui-icon layui-icon-rate-solid " style="color: chartreuse;"></i>
</button>
<!-- layui-icon-left  -->
<!-- layui-icon-right  -->
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i>
</button>
<hr>
<h3>按钮组</h3>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
五、表单的使用（重点）
- required：注册浏览器所规定的必填字段
- lay-verify：注册form模块需要验证的类型
- class="layui-input"：layui.css提供的通用CSS类
先看看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div {
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 参考： -->
<!-- <label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<!-- 1.定义容器 -->
<br>
<br>
<div class="layui-container">
<!-- 2.定义form表单 -->
<form action="" method="GET" class="layui-form">
<div class="layui-form-item">
<!-- lable 就是鼠标点击输入框前面的字体时就可以聚焦再输入框上了 -->
<!-- <label class="layui-form-label"><h2>用户名:</h2></label> -->
<label class="layui-form-label">用户名:</label>
<!-- 3.加输入框layui-input-block -->
<div class="layui-input-block">
<!-- required lay-verify="required" layui提供的验证 autocomplete="off" 浏览器的自动填充 -->
<input type="text" name="title" 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-block">
<!-- required lay-verify="required" layui提供的验证 autocomplete="off" 浏览器的自动填充 -->
<input type="text" name="title" 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-block">
<!-- required lay-verify="required" layui提供的验证 autocomplete="off" 浏览器的自动填充 -->
<!-- autocomplete="off" 没写 -->
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
</div>
</div>
<h3>短一点的输入框</h3>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required="" lay-verify="required" lay-vertype="tips" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<h3>做个锁定和解除 开关</h3>
<!-- 其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格 -->
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="锁定|解除">
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="爱过|分手">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
<!--
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值，否则选中时返回的就是默认的on -->
<h3>文本域</h3>
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">class="layui-textarea"：layui.css提供的通用CSS类</textarea>
<hr>
<h3>组装行内表单(开发中用过import)</h3>
<br>
<div class="layui-form-item">
<!-- class="layui-inline"：定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<!-- class="layui-input-inline"：定义内层行内 -->
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<!-- layui-form-mid" 就那- -->
<div class="layui-form-mid">-</div>
<!-- 下一个输入框 -->
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<h3>忽略美化渲染</h3>
<select lay-ignore>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
</select>
<br>
<hr>
<select>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
<option>棵洒家打开</option>
</select>
<h3>表单方框风格</h3>
<br>
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<hr>
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
<!-- 开关 -->
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
</div>
</div>
<p>不加pane 好像也没有什么变化</p>
<div class="layui-form-item" >
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
<!-- 开关 -->
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<!-- 复选框 -->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作"><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>写作</span><i class="layui-icon layui-icon-ok"></i></div>
<input type="checkbox" name="like[read]" title="阅读" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>阅读</span><i class="layui-icon layui-icon-ok"></i></div>
<input type="checkbox" name="like[dai]" title="发呆"><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>发呆</span><i class="layui-icon layui-icon-ok"></i></div>
</div>
</div>
</div>
</div>
</form>
</form>
<!-- 例子 -->
<h2>官网案例：</h2>
<hr>
<form class="layui-form" action="">
<!-- 输入框 -->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<!-- layui-input-block 独占一行 块级元素 -->
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 密码框 -->
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<!-- layui-input-inline 也是块级 -->
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<!-- 选择框 -->
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<!-- 复选框 -->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<!-- 自定义 -->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="打游戏">
<input type="checkbox" name="like[read]" title="睡觉" checked>
<input type="checkbox" name="like[dai]" title="上班">
<input type="checkbox" name="like[zuofan]" title="做饭">
<input type="checkbox" name="like[maicai]" title="买菜">
<input type="checkbox" name="like[douyin]" title="看视频刷抖音">
<input type="checkbox" name="like[chaopai]" title="看潮牌">
<input type="checkbox" name="like[guangjie]" title="逛街">
<input type="checkbox" name="like[lei]" title="没钱好累">
</div>
</div>
<!-- 开关 -->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<!-- 单选框 -->
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<!-- 自定义单选框 -->
<div class="layui-form-item">
<label class="layui-form-label">潮牌
</label>
<div class="layui-input-block">
<!-- value="匡威" 没显示 -->
<input type="radio" name="chaopai" value="匡威" title="匡威">
<input type="radio" name="chaopai" value="vans" title="vans">
<input type="radio" name="chaopai" value="nike" title="nike">
<input type="radio" name="chaopai" value="Adidas" title="Adidas">
<input type="radio" name="chaopai" value="puma" title="puma">
<input type="radio" name="chaopai" value="puma" title="puma" checked>
</div>
</div>
<!-- 文本域 -->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</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>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</div>
<!-- inline元素不会独自占一行，多个相邻元素会排在同一行中，直到一行排不下，才会新换一行，其宽度随元素的内容而变化 -->
<div class="layui-form-item">
<label class="layui-form-label">输入框1:</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">输入框2:</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">银行账号:</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">银行密码:</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<script src="./layui/layui.all.js"></script>
</body>
</html>
效果：
默认填充与不填充的区别 不填充：是没有提示的
忽略layui的渲染 但一般不推荐这样做
layui-input-block和layui-input-inline的区别 ？
layui-input-block 是一个表单元素占一行，竖着，以列表的形式排列。
layui-input-inline允许多个表单控件占一行，横着，一行可以放置多个表单元素。 block元素会独自占一行，多个block元素各自新起一行，默认情况下 ，block元素宽度自动填充其父元素宽度 举个栗子：
<div class="layui-form-item">
<label class="layui-form-label">输入框1:</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">输入框2:</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">银行账号:</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">银行密码:</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
模块化引入：
把js 换成 layui.js 就行 其他跟上面代码一样
六、选项卡的使用
参考： www.example.com/index.html#… 就是代表index.html中的print位置。
在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<div class="layui-container">
<h2>学习选项卡</h2>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
</div>
<!-- Tab简洁风格 是没有 layui-tab-item -->
<!-- 通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。
如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。
详见文档左侧【内置组件 - 基本元素操作 element】 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content"></div>
</div>
<hr>
<!-- Tab卡片风格 -->
<!-- 通过追加class：layui-tab-card来设定卡片风格 -->
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<!-- Tab响应式 -->
<!-- 带删除的Tab 重点 -->
<!-- 你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除 -->
<div class="layui-tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户基本管理</li>
<li>权限分配</li>
<li>全部历史商品管理文字长一点试试</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<!-- ID焦点定位 -->
<!-- 你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配 -->
<div class="layui-tab" lay-filter="test1">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111" >文章列表</li>
<li lay-id="222">发送信息</li>
<li lay-id="333">权限分配</li>
<li lay-id="444">审核</li>
<li lay-id="555">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<script>
//还不清楚怎么用 去看看 常用元素操作 - layui.element
layui.use('element', function(){
var element = layui.element;
//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#test1=/, '');
element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
//监听Tab切换，以改变地址hash值
element.on('tab(test1)', function(){
location.hash = 'test1='+ this.getAttribute('lay-id');
});
});
</script>
<script src="./layui/layui.all.js"></script>
</body>
</html>
七、表格
标签定义及使用说明:
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。
<html>
<body>
<table width="1000px" border="1px" cellspacing="0" cellpadding="0">
<colgroup>
<col width="5%"/>
<col width="15%"/>
<col width="10%"/>
<col width="20%"/>
</colgroup>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
</table>
</body>
</html>
注释
嵌套的 COL 属性将覆盖 COLGROUP 属性。
使用 SPAN 属性可以指定 COLGROUP 定义的表格列数。该属性的缺省值为 1。
COL 元素可以出现在 COLGROUP 元素之外，这两个元素可用于类似的目的。但是，你必须使用 COLGROUP 元素来决定表格内部分隔线(rules)应该处于的位置。见下面第一个例子。
若在 COLGROUP 中嵌套了 COL 元素则应该避免在 COLGROUP 中使用 SPAN 标签属性。这是因为属于嵌套的 COL 元素的 SPAN 标签属性将覆盖 COLGROUP 元素中的标签属性。这可能引起代码的混乱及可能并非所愿的结果。参见下面的第二个例子。
TABLE 对象及其关联元素有一个独立的表格对象模型，该模式使用不同于常规对象模型的方法。要获得关于表格对象模型更多的信息，请参看如何动态生成表格。
此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。
此元素是块元素。
此元素需要关闭标签。
个人总结：
col 控制的是td 对tr无效的 后面的 colgroup 会覆盖掉原来的有的属性 没有就加上 内部没有col 就在colgroup外面定义：
span 解释下 说白了就是前几列的意思 如：span= 2 就是前2列（这个说法错误） 突然有问题：
<!-- align 定义在列组合中内容的水平对齐方式。 -->
<table width="100%" border="1" red 红色只是第三列有颜色>
<!-- 为什么 span="2" 才是红色？ -->
<colgroup span="2" align="left"></colgroup>
<!-- align="right" 会覆盖掉 原来的align="left" -->
<colgroup style="background-color:red;"></colgroup>
<colgroup align="right" style="background-color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
```
因为：
COLGROUP 元素指定表格中一列或一组列的默认属性。
COL 指定基于列的表格默认属性
span= 2 的意思是从左到右前第二列
align 定义在列组合中内容的水平对齐方式。 -->
<table width="100%" border="1" red 红色只是第三列有颜色>
<!-- 为什么 span="2" 才是红色？ span = 2 是前两列 -->
<colgroup span="2" align="left" style="background-color:green;"></colgroup>
<!-- align="right" 会覆盖掉 原来的align="left" -->
<!-- 第三列 -->
<colgroup style="background-color:red;"></colgroup>
<!-- 第四列 -->
<colgroup align="right" style="background-color:#0000FF;"></colgroup>
<!-- 第五列 -->
<colgroup align="right" style="background-color:hotpink; "></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
<th>第五列</th>
</tr>
</table>
回归正题：
<table class="layui-table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.layui-row div{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<!-- column call林 列的意思 -->
<!-- lay-skin="属性值" -->
<!-- line （行边框风格） -->
<!-- row （列边框风格） -->
<!-- nob （无边框风格） -->
<!-- lg 大 -->
<!-- sm 小 -->
<div class="layui-container">
<h2>学习选项卡</h2>
<!-- <table class="layui-table" lay-even lay-skin="row" lay-size="lg"> -->
<table class="layui-table" lay-even lay-skin="row" lay-size="sm">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- 公司用 -->
<table class="layui-table" lay-even lay-skin="line">
<!-- 无边框表格（内部结构参见右侧目录“常规用法”） -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- 例子: -->
<table class="layui-table">
<!-- colgroup 里面定义宽高 -->
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<!-- 自定义 -->
<table>
<colgroup>
<col>
</colgroup>
</table>
<br><br><br>
<hr>
<!-- align 定义在列组合中内容的水平对齐方式。 -->
<table width="100%" border="1" red 红色只是第三列有颜色>
<!-- 为什么 span="2" 才是红色？ span = 2 是前两列 -->
<colgroup span="2" align="left" style="background-color:green;"></colgroup>
<!-- align="right" 会覆盖掉 原来的align="left" -->
<!-- 第三列 -->
<colgroup style="background-color:red;"></colgroup>
<!-- 第四列 -->
<colgroup align="right" style="background-color:#0000FF;"></colgroup>
<!-- 第五列 -->
<colgroup align="right" style="background-color:hotpink; "></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
</tr>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
<th>第四列</th>
<th>第五列</th>
</tr>
</table>
<br>
<hr>
<table width="1000px" border="1px" cellspacing="0" cellpadding="0">
<colgroup>
<col width="5%"/>
<col width="15%"/>
<col width="10%"/>
<col width="20%"/>
</colgroup>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
</table>
<script src="./layui/layui.all.js"></script>
</body>
</html>
