layui
一.layui概述
1.layui下载
- 在浏览器中输入https://www.layui.com/会出现以下界面
- 点击立即下载进行下载
- 下载后并进行解压
2.layui目录结构
二.layui基本使用
1.引入核心文件
<head>
<meta charset="UTF-8">
<title>layui的使用</title>
<!--引入layui.css文件-->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!--引入layui.js文件(采用模块化引入)-->
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
</head>
2.html代码
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
//layui的弹出框
layer.msg('Hello World');
});
</script>
三.页面元素
在使用layui时,需要注意要导入哪个样式
1.布局容器
1.1固定宽度
- 将栅格放入一个带有 class=“layui-container” 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。
<div class="layui-container" style="background-color: navajowhite; height: 300px;">
固定宽度
</div>
1.2完整宽度
- 将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中,那么宽度将不会固定,而是 100% 适应。
<div class="layui-fluid" style="background-color: burlywood; height: 300px;">
完整宽度
</div>
2.栅格系统
- 栅格系统(具备响应式能力)将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
2.1栅格布局规则
- 定义行
<div class="layui-row"></div>
- 定义列
总行数:12(变量* 代表的是该列所占用的12等分数)
注意:如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
//变量md 代表的是不同屏幕下的标记
<div class="layui-col-md*"></div>//中等屏幕(桌面≥992px)
<div class="layui-col-xs*"></div>//超小屏幕(手机<768px)
<div class="layui-col-sm*"></div>//小屏幕(平板≥768px)
<div class="layui-col-lg*"></div>//大型屏幕(桌面≥1200px)
- layui-col-md* 表示一组列(column),且放在行(row)内。
- 响应式规则:栅格会自动根据屏幕的分辨率选择对应的样式。
- 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
eg1:
<body>
<!--栅格系统
1.定义行:layui-row
2.定义列:layui-col-md*
md表示不同的屏幕标识(xs,sm,md,lg)
*表示列的数量
-->
<!--布局容器-->
<div class="layui-container">
<!--定义行-->
<div class="layui-row">
<!--定义列-->
<div class="layui-col-md5" style="background-color: #00FFFF;">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: #007DDB;">
内容7/12
</div>
</div>
<!--定义行-->
<div class="layui-row">
<!--定义列-->
<div class="layui-col-md4" style="background-color: #FF0000;">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: #FF5722;">
内容4/12
</div>
<div class="layui-col-md6" style="background-color: #FFB800;">
内容6/12
</div>
</div>
</div>
</body>
代码结果:
eg2:
<h3>平板,桌面端的不同表现形式</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4" style="background-color: #40AFFE;">
平板≥768px:6/12 | 桌面端≥992px:4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6" style="background-color: #0000FF;">
平板≥768px:4/12 | 桌面端≥992px:6/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8" style="background-color: #5FB878;">
平板≥768px:12/12 | 桌面端≥992px:8/12
</div>
</div>
</div>
结果展示:
2.2列间距
定义列间距
<div class="layui-row layui-col-space*"></div>//*代表的是px值(1-30)
eg1:
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div style="background-color: #5FB878;">
4
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: #0000FF;">
4
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: #01AAED;">
4
</div>
</div>
结果展示:
2.3列偏移
定义列偏移
<div class="layui-col-md4 layui-col-md-offset*"></div>//*代表的是列数
eg1:
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: #5FB878;">
4
</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color: #0000FF;">
向右移动4列
</div>
</div>
</div>
结果展示:
2.4列嵌套
- 在列元素(layui-col-md*)中插入行元素(layui-row).
eg1:
<h3>列嵌套</h3>
<div class="layui-row">
<div class="layui-col-md6">
<div style="background-color: #5FB878;">
<div class="layui-row">
<div class="layui-col-md3" style="background-color: #40AFFE;">
内部列
</div>
<div class="layui-col-md5" style="background-color: #00F7DE;">
内部列
</div>
<div class="layui-col-md4" style="background-color: #8D8D8D;">
内部列
</div>
</div>
</div>
</div>
</div>
结果展示:
栅栏详细请查看官方文档:https://www.layui.com/doc/element/layout.html
3.基本元素
3.1按钮
- 向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
3.1.1用法
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.layui.com/doc/element/button.html" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
结果展示:
3.1.2主题
名称 | 组合 |
---|---|
原始 | class=“layui-btn layui-btn-primary” |
默认 | class=“layui-btn” |
百搭 | class=“layui-btn layui-btn-normal” |
暖色 | class=“layui-btn layui-btn-warm” |
警告 | class=“layui-btn layui-btn-danger” |
禁用 | class=“layui-btn layui-btn-disabled” |
eg:
<!--不同主题的按钮-->
<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>
结果展示:
名称 | 组合 |
---|---|
主色 | class=“layui-btn layui-btn-primary layui-border-green” |
百搭 | class=“layui-btn layui-btn-primary layui-border-blue” |
暖色 | class=“layui-btn layui-btn-primary layui-border-orange” |
警告 | class=“layui-btn layui-btn-primary layui-border-red” |
深色 | class=“layui-btn layui-btn-primary layui-border-black” |
eg:
<!--不同主题的按钮-->
<button class="layui-btn layui-btn-primary layui-border-green">原始按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
<button class="layui-btn layui-btn-primary layui-border-black">禁用按钮</button>
结果展示:
3.1.3尺寸
尺寸 | 组合 |
---|---|
大型 | class=“layui-btn layui-btn-lg” |
默认 | class=“layui-btn” |
小型 | class=“layui-btn layui-btn-sm” |
迷你 | class=“layui-btn layui-btn-xs” |
eg;
<!--不同尺寸的按钮-->
<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>
结果展示:
尺寸 | 组合 |
---|---|
大型百搭 | class=“layui-btn layui-btn-lg layui-btn-normal” |
正常暖色 | class=“layui-btn layui-btn-warm” |
小型警告 | class=“layui-btn layui-btn-sm layui-btn-danger” |
迷你禁用 | class=“layui-btn layui-btn-xs layui-btn-disabled” |
eg:
<!--不同尺寸的按钮-->
<button class="layui-btn layui-btn-lg layui-btn-normal">大型百搭</button>
<button class="layui-btn layui-btn-warm">正常暖色</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型警告</button>
<button class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用</button>
结果展示:
<button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
3.1.4圆角按钮(layui-btn-radius)
<!--圆角按钮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>
结果展示:
3.1.5图标按钮
<!--图标按钮-->
<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>
结果展示:
图标详细请查看官方文档:https://www.layui.com/doc/element/icon.html
按钮详细请查看官方文档:https://www.layui.com/doc/element/button.html