本文介绍了如何在Spring Boot项目中集成Thymeleaf模板引擎，并结合Bootstrap和jQuery来创建页面。静态资源如Bootstrap和jQuery库应放置在/src/main/resources/static目录下。通过Thymeleaf的语法在HTML中引入这些资源，例如<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>等。这允许在网页中使用Bootstrap的样式和jQuery的功能。
spring boot thymeleaf模版集成bootstrap和jquery
spring boot的所有静态资源是放在 /src/main/resource/static目录下
直接复制bootstrap目录和jquery文件放到这个目录里，在网页中可以进行如下
引入
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<script th:src="@{jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> access model</h3>
</div>
<div class="panel-body">
<h3 > access model</h3>
</div>
</div>
</body>
</html>
注间thyemleaf引入css和js的格式，前面都加入了th:
spring boot的所有静态资源是放在 /src/main/resource/static目录下
直接复制bootstrap目录和jquery文件放到这个目录里，在网页中可以进行如下
引入
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<script th:src="@{jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> access model</h3>
</div>
<div class="panel-body">
<h3 > access model</h3>
</div>
</div>
</body>
</html>
注间thyemleaf引入css和js的格式，前面都加入了th:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
