SpringBoot2.0 + Thymleaf 引用外部 CSS无效的解决办法
1. 首先我要先吐槽,狠狠的吐槽!现在遇见的问题都是百度,但是我越来越失望了,百度问题出来的有80%是无脑的复制粘贴,20%不懂还瞎说,各个平台上都有,真是误人子弟啊。平复一下心情,说问题;耗时一上午,最终解决的,真是细节决定成败
2. 问题描述: springBoot2.0 + Thymleaf 想要引入bootstrap做一个简单的记事本自己用
原始代码:
2.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 然后问题来了
页面并没有按照指定的class样式进行渲染,于是开始了漫长的百度之路..最后还是靠自己无意中想起来Thymleaf对于渲染html时比较严格的,必须遵守XML规则类似的,具体请看官网,任何技术还是参考官方文档靠谱,然后再自己亲自实践去证明
3.解决办法:
<link 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 | 相关文档。 |