SpringBoot、thymeleaf和Bootstrap的填坑过程

最新推荐文章于 2025-06-11 09:00:00 发布

梅雨心情

最新推荐文章于 2025-06-11 09:00:00 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： SpringBoot 文章标签： SpringBoot Thymeleaf Bootstrap

本文链接：https://blog.youkuaiyun.com/studyhard232/article/details/81291611

SpringBoot 专栏收录该内容

1 篇文章

订阅专栏

在SpringBoot项目中整合Thymeleaf和Bootstrap时遇到了一些问题。首先，解决Thymeleaf在HTML5文件中无法正常工作的问题，可能是版本不兼容，通过查阅StackOverflow找到解决方案并导入相关依赖。其次，为了使用Bootstrap，下载并引入到项目静态资源目录，同时确保引入jQuery。最后，解决SpringBoot中HTML页面跳转404错误，原因是URL路径不完整，需在Controller中添加完整映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、导入了thymeleaf的依赖后，在HTML5文件中使用thymeleaf的几个标签仍然有问题，其实大概是版本问题，具体可以看https://stackoverflow.com/questions/41354509/html-errors-when-serving-spring-mvc-but-not-when-viewing-the-page-statically，最后需要导入以下依赖即可。

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

二、在网上下载了Bootstrap，解压后复制到了本地项目的static目录下，另外Bootstrap是依赖于jQuery，所以需要下载jQuery的js文件。反正我看到官网上和大多博客给到的调用都是链接，如果怕麻烦也可以直接用，将以下复制到H5文件的<head></head>中。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

后来看到了个别博客和Stack Overflow后，调用本地的方式如下：

 <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript" src="@{jquery.3.3.1.js}"></script>
    <script type="text/javascript" src="@{js/bootstrap.min.js}" ></script>

三、关于SpringBoot的一个坑，就是之前写了HTML文件后，有对应的Controller，后来做网页跳转总是出现404问题，而且很尴尬的是控制台还没有报错，这个让初学者会很难受。最后问题是需要做跳转操作的HTML文件中的跳转行为有问题，在类的头顶我也写了映射RequestMapping，所以需要写全。

th:action="@{/.../...}