码迷,mamicode.com
首页 > 其他好文 > 详细

thymeleaf拆分头部(head)显示异常问题

时间:2018-12-01 13:05:21      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:tip   css样式   代码   .com   gif   container   F12   www   查看   

问题描述:

刚用thymeleaf不久,考虑到公共头部的导入css,js代码,需要拆分。

技术分享图片

 

拆分之后,bootstrap-select下拉多选框出现“样式异常”,本认为是头部拆分问题,css样式未导入成功,

 

解决过程:

查看firebug(F12)->Network

技术分享图片

 

发现并不是css未导入,查看页面源码发现问题所在

技术分享图片

 

技术分享图片

缺少<!DOCTYPE html>,在显示页面第一行添加该行,问题解决。

 

问题原因:

浏览器解析文件,第一行必须写明文档类型,不然浏览器也不知道怎么解析。附带:http://www.w3school.com.cn/tags/tag_doctype.asp

 

源码:

显示:

技术分享图片
 1 <!DOCTYPE html>
 2 <div th:replace="/common/header :: html"></div>
 3 
 4 <body>
 5     <div class="container">
 6     <form class="form-horizontal">
 7         <div class="form-group">
 8             <label class="col-sm-2 control-label">test:</label>
 9             <div class="col-sm-10">
10                 <select class="selectpicker form-control" mutiple>
11                     <option>11111</option>
12                     <option>22222</option>
13                     <option>33333</option>
14                     <option>44444</option>
15                 </select>
16             </div>
17         </div>
18     </form>
19     </div>
20 </body>
21 </html>
menu.html

头部:

技术分享图片
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap-select.min.css}">

<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-select.min.js"></script>
</head>
header.html

 

另:

在header.html中的th:src,th:href写法或者纯html引入的写法,效果都是一样,暂时未发现区别。

 

thymeleaf拆分头部(head)显示异常问题

标签:tip   css样式   代码   .com   gif   container   F12   www   查看   

原文地址:https://www.cnblogs.com/allinfocus/p/10048588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!