layui.css如何使用,Layui 基本使用
介绍
由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但个人认为该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
说白了，该框架就是为了方便后端人员开发前端而使用的。
官方文档：https://www.layui.com/doc/
Layui、Easyui和Bootstrap对比
环境导入
// 本地导入：
// 导入CSS文件
// 导入JS文件
// CDN导入：
注：
若将Layui下载到本地进行导入时，记得在将layui.css和layui.js导入的同时，将其中的字体等也一同导入，以免显示的结果有异常
使用CDN导入时，提供的CDN链接由于配置文件，在导入字体文件等时会出现跨域请求的问题，所以字体等可能无法正常显示，因此不推荐，不过这里还是附上CDN链接：CDN链接
好看的字体图标
好用的内置模块
layer弹层
这个是该框架的代表作，常用于一些公告、提示框、轮播相册等场景，举例：
弹层使用layui.use('layer', function () {
var layer = layui.layer;
layer.tips('上', '#test1', { // 表示在id=test1的地方显示弹层
tips: 3, // 1/2/3/4分别表示从：上/右/下/左显示弹层
time: 0, // 设置为0表示不消失
});
});
结果图：
弹层示例图
多个弹层示例
弹层使用显示弹层
删除弹层1
删除弹层2
删除弹层3
删除弹层4
layui.use('layer', function () {
$('#show').click(function () {
for (i = 1; i <= 4; i++) {
layui.layer.tips(i, '#test' + i, { // 表示在id=test1的地方显示弹层
tips: i, // 1/2/3/4分别表示从：上/右/下/左显示弹层
// area: ['200px', '20px'], // 设置长高
time: 0, // 设置为0表示不消失
tipsMore: true, //支持多个弹层
success: function (layero, index) {
// console.log(layero, index);
layero.addClass(i + "-error"); // 添加一个class
layero.children().eq(0).removeAttr("style");
layero.children().eq(0).css("line-height", "20px"); // 设置行高
// 给当前的标签设置id及样式
}
});
}
});
$('.del').click(function () {
current = $(this).index();
$("." + current + '-error').remove();
// 删除按钮对应弹层，这里没有使用官方提供的close方法
// 因为close方法是根据弹层的索引来进行删除
// 但是每点击依次显示弹层，就会多4个弹层，那么其将无法把你希望的弹层都删除
})
});
结果图：
多个弹层示例
样式参考文档：https://www.layui.com/demo/layer.html
更多使用示例：http://layer.layui.com/
日历控件示例
layDate快速使用layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1', //指定元素
<