Thymeleaf 引入css js 无效终极解决方案

最新推荐文章于 2024-08-14 16:40:11 发布

置顶 jensen0316

最新推荐文章于 2024-08-14 16:40:11 发布

阅读量3.9w

点赞数 10

分类专栏： springboot+thymeleaf 文章标签： springboot spring thymeleaf css js

本文链接：https://blog.csdn.net/jensen0316/article/details/81127396

版权

springboot+thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于springboot集成thymeleaf后引入css和js无效的问题，下面给出了解决方案，直接上图：

以下是关于静态资源的项目结构

在html代码中引用如代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>测试窗口</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"
          rel="stylesheet"/>
    <script th:src="@{/script/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <span class="panel-title">公司信息</span>
                </div>
                <div class="panel-body">
                    公司链接：<span th:text="#{company.url}">www.it.com</span><br/>
                    公司名称：<span th:text="#{company.name}">中国IT控股有限公司</span><br/>
                    公司代码：<span th:text="#{company.code}">00370.hk</span><br/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

下图为效果图