問題描述：
剛用thymeleaf不久，考慮到公共頭部的導入css,js代碼，需要拆分。
拆分之后，bootstrap-select下拉多選框出現“樣式異常”，本認為是頭部拆分問題，css樣式未導入成功，
解決過程：
查看firebug(F12)->Network
發現並不是css未導入，查看頁面源碼發現問題所在
缺少<!DOCTYPE html>，在顯示頁面（即下面的menu.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>
頭部：
<!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中的th:src，th:href寫法和原生html引入的寫法有所區別
th:href相比href會在路徑前添加context-path代表的字符串（項目名稱），並且動態拼接等號后面的參數
附：