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

关于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>

下图为效果图

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

注：static目录为spring默认静态文件根目录，不需要再yml中特别指出。

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

相关推荐