SpringBoot2.0 + Thymleaf 引用外部 CSS无效的解决办法

1. 首先我要先吐槽,狠狠的吐槽!现在遇见的问题都是百度,但是我越来越失望了,百度问题出来的有80%是无脑的复制粘贴,20%不懂还瞎说,各个平台上都有,真是误人子弟啊。平复一下心情,说问题;耗时一上午,最终解决的,真是细节决定成败

2. 问题描述: springBoot2.0 + Thymleaf 想要引入bootstrap做一个简单的记事本自己用

原始代码:

2.1

SpringBoot2.0 + Thymleaf 引用外部 CSS无效的解决办法_第1张图片

note: 说明一下这个路径是正确的,springboot不管是1.x或2.x都是默认去static下面寻找静态资源,所以这样在浏览器localhost:8080/css/bootstrap.min.css是可以访问到的;顺便多说一句,springBoot2.0这个默认localhost:8080/ URL回去寻找templates下的index.x(.html .ftl),即使没有显示的编写controller也是可以的,本人亲自实验过的。

2.2 然后问题来了

SpringBoot2.0 + Thymleaf 引用外部 CSS无效的解决办法_第2张图片

页面并没有按照指定的class样式进行渲染,于是开始了漫长的百度之路..最后还是靠自己无意中想起来Thymleaf对于渲染html时比较严格的,必须遵守XML规则类似的,具体请看官网,任何技术还是参考官方文档靠谱,然后再自己亲自实践去证明


3.解决办法:   

rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}">

在原代码基础上添加 了 rel="stylesheet",解决了。

4. 根据w3cschool给出的文档 

rel 属性规定当前文档与被链接文档之间的关系。

属性值

描述
alternate 文档的替代版本(比如打印页、翻译或镜像)。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表(解释)。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
经过本人实验,在Thymleaf中必须使用对应的rel值,否则引入的css或其他文件将不起作用,有兴趣可以自己做实验哦~



你可能感兴趣的:(SpringBoot2.0 + Thymleaf 引用外部 CSS无效的解决办法)