Q&A
「適用されない」はどのように確認したのでしょうか。
質問本文に追記してください。
springbootのThymeleafでbootstrapを使いたいと思い、このようにしているのですがbootstrapが使えません。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Todoリスト</title> <link rel="stylesheet" href="/static/css/bootstrap.css" th:href="@{/css/bootstrap.css}"> <script src="/static/js/jquery.js" th:src="@{/js/jquery.js}"></script> <script src="/static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script> </head> <body> <div th:replace="/common.html::header"></div> <hr/> <div class="container"> <h3>新しいTodoを作成する</h3> <form method="post" th:action="@{/}"> <div class="form-group"> <label class="control-label">ToDo名</label> <input class="form-control" type="text" name="title" /> </div> <div class="form-group"> <label class="control-label">期限</label> <input class="form-control" type="text" name="day" /> <button class="btn btn-default" type="submit">ToDoの追加</button> </div> </form> <table class="table table-bordered"> <tbody> <tr th:each="list : ${lists}" th:object="${list}"> <td th:text="*{title}"></td> <br> <td th:text="*{day}"></td> <td th:text="${#dates.format(list.createDay, '(yyyy-MM-dd )')}">(1970-01-01 )</td> <td><a class="btn btn-default" th:href="@{/{id}/edit(id=*{id})}">編集</a></td> <td> <form th:unless="${list.done}" method="post" th:action="@{/done}" th:object="${list}"> <input type="hidden" name="id" th:value="*{id}" /> <input class="btn btn-default" type="submit" value="未完了" /> </form> <form th:if="${list.done}" method="post" th:action="@{/restore}" th:object="${list}"> <input type="hidden" name="id" th:value="*{id}" /> <input class="btn btn-default" type="submit" value="完了" /> </form> </td> </tr> <th:block th:if="${#lists.isEmpty(lists)}"> <p>登録されたToDoはございません</p> </th:block> </tbody> </table> </div> </body> </html>
フォルダはこのように配置し,gradle bootRunでアプリを起動、http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
どのようにすればbootstrapが使えるようになるのでしょうか？
何卒よろしくお願い致します。
ソースを表示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Todoリスト</title> <link rel="stylesheet" href="/css/bootstrap.css"> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.js"></script> </head> <body> <div style="background:darkseagreen"> <a href="/">TODOリスト</a> <a href="search">検索</a> </div> <hr/> <div class="container"> <h3>新しいTodoを作成する</h3> <form method="post" action="/"> <div class="form-group"> <label class="control-label">ToDo名</label> <input class="form-control" type="text" name="title" /> </div> <div class="form-group"> <label class="control-label">期限</label> <input class="form-control" type="text" name="day" /> <button class="btn btn-default" type="submit">ToDoの追加</button> </div> </form> <table class="table table-bordered"> <tbody> <tr> <td>aa</td> <br> <td>2</td> <td>(2019-08-22 )</td> <td><a class="btn btn-default" href="/2/edit">編集</a></td> <td> <form method="post" action="/done"> <input type="hidden" name="id" value="2" /> <input class="btn btn-default" type="submit" value="未完了" /> </form> </td> </tr> <tr> <td>ss</td> <br> <td>1</td> <td>(2019-08-22 )</td> <td><a class="btn btn-default" href="/1/edit">編集</a></td> <td> <form method="post" action="/done"> <input type="hidden" name="id" value="1" /> <input class="btn btn-default" type="submit" value="未完了" /> </form> </td> </tr> </tbody> </table> </div> </body> </html>
追記しました！
これだけでは「適用されない」根拠にはなっていませんよ。
HTMLと画面キャプチャを提示するとか、ブラウザ開発ツールのコンソールを確認した結果を提示するとか、
「他者が見て分かる情報」の提示が必要です。
これでわかりますでしょうか？
そうですね・・ファイルの読み込み自体にエラーは出てないようです。
ただ気になるのはjsファイルに対して出ているエラーですね。
「そもそも読み込み記述自体が正しく入っているか」ということになります。
ブラウザ「ソースを表示」でHTML全て提示いただけますか？
それでも解決しそうになかったらCDNで妥協しても良いかと。
本体CSS、JSをいじることってそうそうないので
あとボタンにbtnだけclassあててみてください。
→ごめんなさい当ててましたね。
ソースを上記に追記しました！
わかりました！やってみます！
上記 inputをbuttonに変更した結果、表記の仕方が変わりました。
CDNもやって見たのですが、何やらエラーになりましたね汗
回答2件
0
ベストアンサー
反映されていたらこうなるはずということですよね。
見た感じコードと構造に間違いはなさそうですし、
ファイルが読み込めていないなら開発ツールのコンソールに404 Not Foundが出るはずなので読み込めていないわけではなさそうです。
JavaScriptのエラーは大いに気になりますが、今回のレイアウトだけで言うと影響はないはず（あくまで「はず」）
念のため、「ソースを表示」からCSSのリンクをクリックしてきちんとBootStrapのCSSがブラウザ表示されるか確認してみてください（ブラウザから直接URL指定で開くのと同じです）
キャッシュクリアも試してみましょう。
それでもできなければ、とりあえずBootStrap公式のトップから取得できるCDNで妥協してください。
※念のため自身でCSS作って簡単な記述(例えば背景色）をしてちゃんと反映されるかは試しておいてくださいね
投稿2019/08/22 02:44
編集2019/08/22 02:44総合スコア80888
0
mtsさんの言うようにCDN読み込みを試すのが良いでしょう。
html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 2<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 4<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
これでうまくいくようであれば問題の絞り込みもできます。
投稿2019/08/22 03:10
退会済みユーザー
総合スコア0
私は持ってきたファイルが悪いのではないかと疑ってます
上記のコードをコピペしたのですが、
Caused by: org.attoparser.ParseException: Could not parse as expression: "https://code.jquery.com/jquery-3.3.1.slim.min.js" (template: "index" - line 7, col 13)
at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
... 52 more
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "https://code.jquery.com/jquery-3.3.1.slim.min.js" (template: "index" - line 7, col 13)
このようなエラーになります。
th:srcの書き方がおかしいためこのようなエラーが出ているのでしょうか？
> 私は持ってきたファイルが悪いのではないかと疑ってます
同じ見解です。
thymeleafのコンパイルエラーですかね。
私はthymeleafについて何の知識もありませんが、
<link rel="stylesheet" href="/static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
<script src="/static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
<script src="/static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
元のこちらの記述を一旦消しても同じですか？
> 上記のコードをコピペしたのですが、
と言っていますが
> th:srcの書き方
と言っているということは何か改変を加えていますか？
私が提示したソースにth:srcはないと思うのですが。
はい、元の記述は一度消しました！
bootstrapの公式ページ通りに<link>はhead内、<script>はbodyの中に記述してみましたが同じエラーでした。
おそらくth:はthymeleafで値を出力するための記述ですので私のCDN読み込みソースをコピペする場合は必要ありません。
何も手を加えずそのまま記述して下さい。
> bootstrapの公式ページ通りに<link>はhead内、<script>はbodyの中に記述してみましたが同じエラーでした。
念の為現在の記述を追記して下さい。
何か問題がある気がします。
これだけでいいはずですけどね。
<head>
<meta charset="UTF-8"/>
<title>Todoリスト</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
何も手を加えずに記述するとbootstrap適用されました！！
There is no locally stored libraryfor the HTTp link.と注意されてたのでth:をつけていたのですがいらなかったようです！
本当に助かりました！ありがとうございます！
ではおそらくローカルに置いているbootstrap.cssなどに問題があります。
こだわりがなければCDNで良いと思います。
特にデメリットも思いつきません。
CDNの方で全然問題ないのでこちらを使って行きたいと思います。
ありがとうございます！
あなたの回答
tips
プレビュー
