前言
在springboot+thymeleaf下的使用
springboot的静态资源可以放在static中而无需任何配置
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}" type="text/javascript" th:fragment="jquery"></script>
<script th:src="@{/layui/layui.js}" type="text/javascript" th:fragment="layui"></script>
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" rel="stylesheet" type="text/css" th:fragment="bootstrap"/>
细节：可禁用thymeleaf缓存便于开发
thymeleaf:
cache: false #禁用缓存，开发使用
layui图标无效问题：
参考https://blog.csdn.net/weixin_44254243/article/details/98311328
入门
layui.use('element', function(){
var element = layui.element;
});
类似下面的use方法，layui.use(‘element’,callback)先把static/layui/lay/modules/element.js引入。
在文档加载完成后，调用callback方法
function use(src){
var script=$("<script/>");
script.attr("src",src);
$('body').append();
}
注意，layui的js一定得放在callback中执行，否则不生效。
样式
布局
layui-row 栅格
layui-col-md共有12等份，下面的示例代码中导航条的logo占1，其他模块占3，往右偏移8.
<div class="layui-row ">
<div class="layui-col-md1 layui-bg-black">
logo
</div>
<div class="layui-col-md3 layui-col-md-offset8">
<ul class="layui-nav" lay-filter="">
<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="javascript:;">解决方案</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>
</ul>
</div>
</div>
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
