前提・実現したいこと
いつもお世話になっております。
BootStrapを使ってすべての画面にヘッダーとフッターを付ける作業をしていたところ、
ログイン画面(未ログイン)の時だけBootStrapのテキストは読み込めますが、CSS,jQuery等が読み込まれません。
ログインすると、正常にBootStrapが読み込めます。thymeleafを使っているのでそこらへんが原因なのでしょうか…?
ログイン画面にもBootStrapのCSS,jQuery等を読み込みたいです。
発生している問題・エラーメッセージ
ログイン画面でBootStrapのCSS,jQuery等が読み込まれない
該当のソースコード
style.html
HTML
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> 4<head th:fragment="layout(title,links)"> 5 6<link 7 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 8 th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" 9 rel="stylesheet" /> 10<script 11 src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" 12 th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script> 13<script 14 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" 15 th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}"></script> 16 17<meta charset="UTF-8"> 18<title>目標管理</title> 19<link th:href="@{/css/style.css}" rel="stylesheet" /> 20</head> 21<body> 22<!--ヘッダー--> 23 <header th:fragment="header"> 24 <nav class="navbar navbar-default"> 25 <div class="container-fluid"> 26 <div class="navbar-header"> 27 <button type="button" class="navbar-toggle collapsed" 28 data-toggle="collapse" data-target="#navbarEexample7"> 29 <span class="sr-only">Toggle navigation</span> <span 30 class="icon-bar"></span> <span class="icon-bar"></span> <span 31 class="icon-bar"></span> 32 </button> 33 <a class="navbar-brand" th:href="home"> 目標管理 </a> 34 </div> 35 36 <div sec:authorize="isAuthenticated()" 37 class="collapse navbar-collapse" id="navbarEexample7"> 38 <ul class="nav navbar-nav"> 39 <li><p sec:authentication="principal.fullname" 40 class="navbar-text"></p></li> 41 </ul> 42 <p class="navbar-text navbar-right"> 43 <a th:href="@{/logout}" class="navbar-link">ログアウト</a> 44 </p> 45 </div> 46 </div> 47 </nav> 48 </header> 49 <!--フッター--> 50 <footer th:fragment="footer"> 51 <nav class="navbar navbar-default navbar-fixed-bottom"> 52 <div class="container"> 53 <div class="navbar-header navbar-right"> 54 <ul class="nav navbar-nav"> 55 <li class="pull-right"><a>@2019 iTAC Solutions Inc.</a></li> 56 </ul> 57 </div> 58 </div> 59 </nav> 60 </footer> 61</body> 62</html>
ログイン画面(css,jQuery等のみ反映されない)
login.thml
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> 4 5<head th:replace="layout :: layout('HOME',~{::link})"> 6<meta charset="UTF-8"> 7<title>Insert title here</title> 8</head> 9<body> 10 <div th:replace="layout :: header"></div> 11 <div>ログイン</div> 12 <div th:if="${session['SPRING_SECURITY_LAST_EXCEPTION']} != null" 13 class="alert-danger"> 14 <span th:text="ユーザ名またはパスワードに誤りがあります"></span> 15 </div> 16 <form th:action="@{/sign_in}" method="post"> 17 ユーザーID: <input type="text" name="username"><br /> パスワード: <input 18 type="password" name="password"> 19 <button type="submit">ログイン</button> 20 </form> 21 <br> 22 <a href="/new">新規登録</a> 23 <div th:replace="layout :: footer"></div> 24</body> 25</html>
intex.html(ログイン後に反映される画面)
html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> 4<head th:replace="layout :: layout('HOME',~{::link})"> 5<meta charset="UTF-8"> 6<title>Insert title here</title> 7</head> 8<body> 9 10 <div th:replace="layout :: header"></div> 11 <h1>あああああ</h1> 12 <p class="text-center title">トップページ</p> 13 <br> 14 <p class="text-center"> 15 <a class="text-center" th:href="@{/{id}(id=${users.id})}">目標一覧</a> 16 </p> 17 <p class="text-center"> 18 <a th:href="@{/acceptregist}">上長登録</a> 19 </p> 20 <p class="text-center"> 21 <a th:if="${users.accept}==true" 22 th:href="@{/memberlist/{id}(id=${users.id})}">メンバー目標一覧</a> 23 </p> 24 <p class="text-center"> 25 <a th:if="${users.authority}=='ROLE_ADMIN'" th:href="@{/admin/menu}">管理者メニュー</a> 26 </p> 27 28 29 30 <div th:replace="layout :: footer"></div> 31</body> 32</html>
試したこと
・Cromeの開発者ツールを使ってBootStrapのcssが入っているか確認→なし
・ログイン後index.html以外のページにヘッダーフッターを反映させてみる→成功
補足情報(FW/ツールのバージョンなど)
Spring Bootを使っています。
ファイル階層がまちがっているのかなと思いましたが、ログイン後のindex以外の画面でがBootStrapが機能したので階層の問題ではないと思いました。
宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/17 02:32