質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

2063閲覧

springbootでbootstrapを使いたい

pokerStars

総合スコア67

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2019/08/22 01:45

編集2019/08/22 02:36

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>

イメージ説明
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/22 01:59

「適用されない」はどのように確認したのでしょうか。 質問本文に追記してください。
m.ts10806

2019/08/22 02:10

これだけでは「適用されない」根拠にはなっていませんよ。 HTMLと画面キャプチャを提示するとか、ブラウザ開発ツールのコンソールを確認した結果を提示するとか、 「他者が見て分かる情報」の提示が必要です。
pokerStars

2019/08/22 02:20

これでわかりますでしょうか?
m.ts10806

2019/08/22 02:29 編集

そうですね・・ファイルの読み込み自体にエラーは出てないようです。 ただ気になるのはjsファイルに対して出ているエラーですね。 「そもそも読み込み記述自体が正しく入っているか」ということになります。 ブラウザ「ソースを表示」でHTML全て提示いただけますか?
m.ts10806

2019/08/22 02:26

それでも解決しそうになかったらCDNで妥協しても良いかと。 本体CSS、JSをいじることってそうそうないので
m.ts10806

2019/08/22 02:31 編集

あとボタンにbtnだけclassあててみてください。 →ごめんなさい当ててましたね。
pokerStars

2019/08/22 02:31

ソースを上記に追記しました! わかりました!やってみます!
pokerStars

2019/08/22 02:43

上記 inputをbuttonに変更した結果、表記の仕方が変わりました。 CDNもやって見たのですが、何やらエラーになりましたね汗
guest

回答2

0

ベストアンサー

反映されていたらこうなるはずということですよね。
イメージ説明

見た感じコードと構造に間違いはなさそうですし、
ファイルが読み込めていないなら開発ツールのコンソールに404 Not Foundが出るはずなので読み込めていないわけではなさそうです。
JavaScriptのエラーは大いに気になりますが、今回のレイアウトだけで言うと影響はないはず(あくまで「はず」)
念のため、「ソースを表示」からCSSのリンクをクリックしてきちんとBootStrapのCSSがブラウザ表示されるか確認してみてください(ブラウザから直接URL指定で開くのと同じです)
イメージ説明

キャッシュクリアも試してみましょう。

それでもできなければ、とりあえずBootStrap公式のトップから取得できるCDNで妥協してください。

※念のため自身でCSS作って簡単な記述(例えば背景色)をしてちゃんと反映されるかは試しておいてくださいね

投稿2019/08/22 02:44

編集2019/08/22 02:44
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/22 03:12

私は持ってきたファイルが悪いのではないかと疑ってます
pokerStars

2019/08/22 03:22

上記のコードをコピペしたのですが、 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の書き方がおかしいためこのようなエラーが出ているのでしょうか?
退会済みユーザー

退会済みユーザー

2019/08/22 03:23

> 私は持ってきたファイルが悪いのではないかと疑ってます 同じ見解です。
退会済みユーザー

退会済みユーザー

2019/08/22 03:25

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> 元のこちらの記述を一旦消しても同じですか?
退会済みユーザー

退会済みユーザー

2019/08/22 03:26

> 上記のコードをコピペしたのですが、 と言っていますが > th:srcの書き方 と言っているということは何か改変を加えていますか? 私が提示したソースにth:srcはないと思うのですが。
pokerStars

2019/08/22 03:28

はい、元の記述は一度消しました! bootstrapの公式ページ通りに<link>はhead内、<script>はbodyの中に記述してみましたが同じエラーでした。
退会済みユーザー

退会済みユーザー

2019/08/22 03:28

おそらくth:はthymeleafで値を出力するための記述ですので私のCDN読み込みソースをコピペする場合は必要ありません。 何も手を加えずそのまま記述して下さい。
退会済みユーザー

退会済みユーザー

2019/08/22 03:29

> bootstrapの公式ページ通りに<link>はhead内、<script>はbodyの中に記述してみましたが同じエラーでした。 念の為現在の記述を追記して下さい。 何か問題がある気がします。
m.ts10806

2019/08/22 03:30

これだけでいいはずですけどね。 <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>
pokerStars

2019/08/22 03:32

何も手を加えずに記述するとbootstrap適用されました!! There is no locally stored libraryfor the HTTp link.と注意されてたのでth:をつけていたのですがいらなかったようです! 本当に助かりました!ありがとうございます!
退会済みユーザー

退会済みユーザー

2019/08/22 03:36

ではおそらくローカルに置いているbootstrap.cssなどに問題があります。
退会済みユーザー

退会済みユーザー

2019/08/22 03:37

こだわりがなければCDNで良いと思います。 特にデメリットも思いつきません。
pokerStars

2019/08/22 03:39

CDNの方で全然問題ないのでこちらを使って行きたいと思います。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問