LayUI学习思维导图
和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
官网：https://www.layui.com/
点击立即下载即可
下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。
使用时我们只需引入下述两个文件即可使用
<!-- LayUI的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<!-- layUI的核心js文件(采用模块化引入) -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-layui的使用</title>
<!-- LayUI的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<!-- layUI的核心js文件(采用模块化引入) -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<script>
//一版直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-布局容器</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
布局容器
1.固定宽度（两侧留白效果）.layui-container 用的多
2.完整宽度（占据屏幕宽度的100%）.layui-fluid
-->
<!-- 固定宽度（两侧留白效果） -->
<div class="layui-container" style="background-color: navajowhite;height: 300px">
固定宽度
</div>
<!-- 完整宽度（占据屏幕宽度的100%） -->
<div class="layui-fluid" style="background-color: cyan;height: 300px">
固定宽度
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-栅格系统.</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
栅格系统
列组合：
1.定义行 .layui-row
2.定义列 .layui-col-md*
md 表示不同屏幕的标识 (xs sm md lg)
* 列的数量
3.每一行被均分为12列，列的总数不能超过12，否则会自动换行
4.响应式规则
栅格会自动根据屏幕的分辨率选择对应的效果。
列边距
.layui-col-space*
* 代表的是px值 (1-30)
列偏移
将列向右偏移指定列数
.*layui-col-md-offset*‘
*代表的是列数
列嵌套
列之间可以无限嵌套
-->
<!-- 布局容器:固定宽度 -->
<div class="layui-container">
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color: deepskyblue">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: bisque">
内容7/12
</div>
</div>
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4" style="background-color: powderblue">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine">
内容4/12
</div>
<div class="layui-col-md6" style="background-color: gray">
内容6/12
</div>
</div>
<!--响应式-->
<hr>
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<!-- 小屏幕占6列，中屏幕占4列 -->
<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占4列，中屏幕占6列 -->
<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占12列，中屏幕占8列 -->
<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
<hr>
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: hotpink">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: indianred">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: powderblue">4</div>
</div>
</div>
<hr/>
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: cyan">4</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color: fuchsia">4
向右移动4列
</div>
</div>
</div>
<hr/>
<h3>列嵌套</h3>
<div class="layui-row">
<div class="layui-col-md6">
<div style="background-color: mediumaquamarine">
<div class="layui-row">
<!-- 嵌套列 -->
<div class="layui-col-md3" style="background-color: burlywood;">
内部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
内部列
</div>
<div class="layui-col-md2" style="background-color: red;">
内部列
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-按钮</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<>
<!--
按钮：
向任意html元素设定 *class="layui-btn"*，建立一个基础按钮
通过追加格式为*layui-btn-{type}* 的class来定义其他按钮风格。
-->
<div class="layui-container">
<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
<hr>
<!-- 不同主题的按钮:颜色 -->
<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>
<hr>
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
<hr>
<!-- layui-btn-radius 圆角按钮 -->
<button class="layui-btn layui-btn-radius">默认圆角按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用圆角按钮</button>
<hr>
<!-- 图标按钮 -->
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i> 刷新
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
<i class="layui-icon layui-icon-heart"></i> 关注
</button>
</div>
</body>
</html>
导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
依赖加载模块：element
实现步骤：
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 导航 依赖element模块,否则无法进行功能性操作
layui.use('element',function(){
var element = layui.element;
});
</script>
<body>
<!--
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
-->
<!-- 水平导航 layui-nav -->
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
除了一般的文字导航，我们还内置了图片和徽章的支持，如：
<body>
<!--
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
-->
<!-- 水平导航 -->
<ul class="layui-nav">
<!-- 导航的子项 -->
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<!-- 导航的子项 -->
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<!-- 导航的子项 -->
<li class="layui-nav-item">
<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="#">修改信息</a></dd>
<dd><a href="#">安全管理</a></dd>
<dd><a href="#">退出</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
通过对导航追加CSS背景类，让导航呈现不同的主题色
<body>
<!-- 墨绿 -->
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<hr>
<!-- 藏青 -->
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 艳蓝 -->
<hr>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<!--二级菜单-->
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
// 导航 依赖element模块
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
<!-- 垂直导航 layui-nav layui-nav-tree -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a href="#">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="#">选项1</a></dd>
<dd><a href="#">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="#">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="#">选项1</a></dd>
<dd><a href="#">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是
水平导航：class="layui-nav"
垂直导航需要追加：class="layui-nav-tree"
侧边导航需要追加：class="layui-nav-tree layui-nav-side"
layui-breadcrumb
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
lay-separator="-" 来自定义分隔符<div class="layui-container">
<!-- 面包屑式导航 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<!-- 设置属性 lay-separator="" 来自定义分隔符 -->
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-导航</title>
<!-- 引入layui的核心css文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
导航
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
垂直导航 layui-nav layui-nav-tree
侧边导航 layui-nav layui-nav-tree layui-nav-side
导航的主题颜色
layui-bg-颜色
墨绿 molv
藏青 cyan
艳蓝 blue
面包屑式导航
layui-breadcrumb
lay-separator="-" 符号设置面包屑导航符的分割符
-->
<!-- 水平导航 layui-nav -->
<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 layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 垂直导航 layui-nav layui-nav-tree -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品</a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品</a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!-- 设置导航的主题颜色 -->
<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
<li class="layui-nav-item"><a href="#">最新活动</a></li>
<li class="layui-nav-item"><a href="#">产品<span class="layui-badge">6</span></a></li>
<li class="layui-nav-item layui-this"><a href="#">大数据</a></li>
<li class="layui-nav-item">
<a href="#">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="#">最新活动</a></dd>
<dd><a href="#">后台模块</a></dd>
<dd><a href="#">电商平台</a></dd>
</dl>
</li>
</ul>
<!--面包屑式导航-->
<span class="layui-breadcrumb">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<hr>
<!-- 面包屑式导航 -->
<span class="layui-breadcrumb" lay-separator="-">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<hr>
<!--设置属性 lay-separator="" 来自定义分隔符 -->
<span class="layui-breadcrumb" lay-separator="|">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a href="#"><cite>正文</cite></a>
</span>
<script type="text/javascript">
//导航 依赖element模块
layui.use('element',function () {
var element = layui.element;
})
</script>
</body>
</html>
实现步骤：
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"</script>
<script type="text/javascript">
// 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
默认风格给容器添加 class=“layui-tab”
简洁风格给容器追加：class=“layui-tab-brief”
卡片风格给容器需要追加：class=layui-tab-card
==lay-allowClose=“true”==设置可删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-选项卡</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
选项卡
默认风格: layui-tab
简洁风格需要追加class: layui-tab-brief
卡片风格需要追加class: layui-tab-card
可以对父容器设置属性 layui-allowClose="true" 来允许Tab选项卡被删除
-->
<!-- 默认风格 .layui-tab-->
<div class="layui-tab">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 简洁风格:layui-tab layui-tab-brief -->
<div class="layui-tab layui-tab-brief">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 卡片风格:layui-tab layui-tab-card -->
<div class="layui-tab layui-tab-card">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<hr>
<!-- 卡片风格:layui-tab layui-tab-card -->
<div class="layui-tab layui-tab-card" lay-allowClose="true">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li>网站设置</li>
<li>用户管理</li>
<li class="layui-this">权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<div class="layui-tab-item">内容1</div>
<div class="layui-tab-item">内容2</div>
<!-- 默认显示此内容 -->
<div class="layui-tab-item layui-show">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<script type="text/javascript">
//选项卡 依赖element模块
layui.use('element',function () {
var element = layui.element;
})
</script>
</body>
</html>
给 table 标签增加 class=“layui-table”
在colgroup 标签中定义表格列的宽度
<col width="数值"> 表示相应列所占的宽度thead 标签表示表格的头部区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-表格</title>
<!--不需要依赖js-->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--
表格
class="layui-table"
常用属性
lay-even 如果设置了该属性，则可以显示隔行换色的效果
lay-skin 设置表格边框风格
line (行边框风格)
row (列边框风格)
nob (无边框风格)
lay-size (设置表格的尺寸)
sm (小尺寸)
lg (大尺寸)
-->
<!-- 基础表格 .layui-table -->
<table class="layui-table">
<colgroup>
<!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
<col width="150">
<col width="300">
<col>
</colgroup>
<!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
<thead>
<!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
<tr>
<!-- th 用于定义表格中的表头,必须嵌套在 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>
<hr>
<!-- 隔行变色 lay-even -->
<table class="layui-table" lay-even lay-skin="row" lay-size="">
<colgroup>
<!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
<col width="150">
<col width="300">
<col>
</colgroup>
<!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
<thead>
<!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
<tr>
<!-- th 用于定义表格中的表头,必须嵌套在 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>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
</body>
</html>
实现步骤：
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<!-- 加载模块 -->
<script type="text/javascript">
// 加载form模块
layui.use("form",function(){
var form = layui.form;
});
</script>
class="layui-form" 来标识一个表单元素块<form class="layui-form" action="">
</form>
<body>
<!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
<form action="" class="layui-form">
<!-- 基本的行区块结构，它提供了响应式的支持。-->
<div class="layui-form-item">
<label class="layui-form-label">标题区域</label>
<div class="layui-input-inline">
<!-- 输入框 -->
<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-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</form>
<script type="text/javascript">
// 表单 依赖form模块
layui.use('form', function() {
var form = layui.form;
});
</script>
</body>
<!-- 输入框 -->
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
selected 属性设置默认选中项disabled 属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)optgroup 标签给 select 分组lay-search 属性开启搜索匹配功能<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<select name="city" lay-verify="required">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021" selected>上海</option>
<option value="0571" disabled>杭州</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<!-- 分组 -->
<select name="quiz">
<option value="">请选择</option>
<!-- 分组城市记忆 -->
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<!-- 分组学生时代 -->
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1. 通过selected属性设置默认选中项
2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
3. 可以通过 optgroup 标签给select分组
4. 通过设置lay-search属性开启搜索匹配功能
-->
<!-- 开启搜索匹配 -->
<select name="city" lay-verify="" lay-search>
<option value ="">请选择</option>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571">layim</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// 表单,依赖 form 模块
layui.use('form', function() {
var form = layui.form;
})
</script>
</body>
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--
复选框
1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
2. 通过checked属性设置被选中的项
3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
4. 通过disabled属性禁用元素
-->
<!-- 默认效果 -->
<input type="checkbox" name="hobby" title="唱歌" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" value="dance" />
<input type="checkbox" name="hobby" title="禁用" disabled />
<br>
<!-- 原始效果 -->
<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
<input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled/>
</div>
</div>
</form>
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关
将复选框，设置lay-skin="switch"形成开关风格
1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
2. 通过checked设置默认打开状态
3. 通过disabled属性禁用开关
4. 通过value属性设置选中的值
-->
<input type="checkbox" name="aa" lay-skin="switch" />
<input type="checkbox" name="bb" lay-skin="switch" checked />
<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
</div>
</div>
</form>
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--
单选框
1. 通过checked设置默认选中项
2. 通过disabled属性禁用单选框
3. 通过value属性设置选中的值
-->
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</form>
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--
文本域
class="layui-textarea"：layui.css提供的通用CSS类
-->
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">
</textarea>
</div>
</div>
</form>
行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）
<form action="" class="layui-form">
<div class="layui-form-item">
<!-- 定义外层行内 .layui-inline -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<!-- 定义内层行内 .layui-input-inline -->
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<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>
</form>
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 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>
</div>
</div>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-表单</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!--
表单
常用属性：
required 浏览器固定必填字段
lay-verify 需要验证的类型 （required 表示必填字段项）
class="layui-input" 提供的通用的样式
layui-input-inline/block 占据部分宽度/全部宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同name属性值时，会填充)
通过追加 layui-from-place 的class ,来设定表单的方框风格
-->
<!-- 在一个容器中设定 *class="layui-form"* 来标识一个表单元素块 -->
<form action="#" class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<!--文本框-->
<input type="text" name="title" required lay-verify="required" class="layui-input">
</div>
</div>
<!--下拉框-->
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1.可通过selected 属性设置 默认选中项
2.通过disabled 属性开启禁用，可以设置select 和 option 标签
（禁用下拉框 和 下拉框选项）
3.可以通过 optgroup 标签给select分组
4.通过设置lay-select 属性开启搜索匹配功能
-->
<select name="city" lay-verify="" required >
<option value="aa" disabled>请选择一个城市</option>
<option value="010">北京</option>
<option value="021" selected>上海</option>
<option value="0571" disabled>杭州</option>
</select>
<!-- 分组 -->
<select name="quiz">
<option value="">请选择</option>
<!-- 分组城市记忆 -->
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<!-- 分组学生时代 -->
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
<!--开启搜索匹配-->
<select name="city" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<!--复选框-->
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--
复选框
1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
2. 通过checked属性设置被选中的项
3. 通过lay-skin属性设置复选框的样式效果（lay-skin="primary"表示原始效果）
4. 通过disabled 属性禁用元素
-->
<!--默认效果-->
<input type="checkbox" name="hobby" title="唱歌" value="sing" checked>
<input type="checkbox" name="hobby" title="跳舞" value="dance">
<input type="checkbox" name="hobby" title="Rap" disabled>
<br>
<!--原始效果-->
<input type="checkbox" name="hobby" title="唱歌" value="sing" lay-skin="primary" checked>
<input type="checkbox" name="hobby" title="跳舞" value="dance" lay-skin="primary">
<input type="checkbox" name="hobby" title="Rap" lay-skin="primary" disabled>
</div>
</div>
<!--开关 复选框改造-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关
将复选框，设置lay-skin="switch" 形成开关风格
1.通过lay-text="打开的值|关闭的值" 来设置开关两种状态显示的值
通过"|" 分割
2.通过checked设置默认打开状态
3.disabled
4.value 设定选定的值
-->
<input type="checkbox" name="aa" lay-skin="switch">
<input type="checkbox" name="bb" lay-skin="switch" checked>
<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off">
<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开">
<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled>
</div>
</div>
<!--单选框-->
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<!--
单选框
1. 通过checked设置默认选中项
2. 通过disabled属性禁用单选框
3. 通过value属性设置选中的值
-->
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<!--文本域-->
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--
文本域
class="layui-textarea" layui.css 提供的通用css类
-->
<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介"
class="layui-textarea">
</textarea>
</div>
</div>
<!--
组装行内表单
class="layui-inline" 定义外层行内
class="layui-input-inline" 定义内层行内
-->
<div class="layui-form-item">
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<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">
<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input" >
</div>
</div>
</div>
<!--忽略layui-->
<div class="layui-form-item">
<label class="layui-form-label">原始效果</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="nan" title="男" lay-ignore />
</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>
<hr>
<br>
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 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>
</div>
</div>
</form>
<!-- 加载模块 -->
<script type="text/javascript">
// 加载form模块
layui.use("form", function () {
var form = layui.form;
});
</script>
</body>
</html>
弹出层官方文档：https://layuion.com/layer/
layer 可以独立使用，也可以通过Layui模块化使用
| 场景 | 用前准备 | 调用方式 |
|---|---|---|
| 1.作为独立组件使用 | 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 | 通过script标签引入layer.js后，直接用即可。 |
| 2.layui 模块化使用 | 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js | 通过*layui.use(‘layer’, callback)*加载模块 |
1、首先去https://layuion.com/layer/独立版本官网下载组件包
2、下载完成后解压，将 layer.js 和 layer.css 拷贝到我们的项目中
3、引入资源
<!--作为独立徐组件使用-->
<link rel="stylesheet" type="text/css" href="layer/layer.css">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="UTF-8"></script>
4、开始使用
<body>
<script type="text/javascript">
layer.msg("Hello");
</script>
</body>