teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

追記

2019/08/22 02:36

投稿

pokerStars
pokerStars

スコア67

title CHANGED
File without changes
body CHANGED
@@ -167,4 +167,7 @@
167
167
  </div>
168
168
  </body>
169
169
  </html>
170
- ```
170
+ ```
171
+
172
+ ![イメージ説明](c36343440d627a4260e6bf4e4f07e873.png)
173
+ ![イメージ説明](c6de6d50750a8c75f6491cd95caec407.png)

3

追記

2019/08/22 02:36

投稿

pokerStars
pokerStars

スコア67

title CHANGED
File without changes
body CHANGED
@@ -75,4 +75,96 @@
75
75
  ![イメージ説明](1dd188cb378cf8d67bf90731857bd112.png)
76
76
  フォルダはこのように配置し,gradle bootRunでアプリを起動、http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
77
77
  どのようにすればbootstrapが使えるようになるのでしょうか?
78
- 何卒よろしくお願い致します。
78
+ 何卒よろしくお願い致します。
79
+
80
+ ソースを表示
81
+ ```ここに言語を入力
82
+ <!DOCTYPE html>
83
+ <html>
84
+ <head>
85
+ <meta charset="UTF-8"/>
86
+ <title>Todoリスト</title>
87
+ <link rel="stylesheet" href="/css/bootstrap.css">
88
+ <script src="/js/jquery.js"></script>
89
+ <script src="/js/bootstrap.js"></script>
90
+
91
+ </head>
92
+ <body>
93
+
94
+ <div style="background:darkseagreen">
95
+ <a href="/">TODOリスト</a>
96
+ <a href="search">検索</a>
97
+
98
+
99
+ </div>
100
+
101
+ <hr/>
102
+ <div class="container">
103
+
104
+ <h3>新しいTodoを作成する</h3>
105
+
106
+ <form method="post" action="/">
107
+ <div class="form-group">
108
+ <label class="control-label">ToDo名</label>
109
+ <input class="form-control" type="text" name="title" />
110
+ </div>
111
+
112
+ <div class="form-group">
113
+ <label class="control-label">期限</label>
114
+ <input class="form-control" type="text" name="day" />
115
+ <button class="btn btn-default" type="submit">ToDoの追加</button>
116
+ </div>
117
+
118
+ </form>
119
+
120
+
121
+ <table class="table table-bordered"> 
122
+ <tbody>
123
+ <tr>
124
+ <td>aa</td>
125
+ <br>
126
+ <td>2</td>
127
+ <td>(2019-08-22 )</td>
128
+ <td><a class="btn btn-default" href="/2/edit">編集</a></td>
129
+
130
+
131
+
132
+ <td>
133
+ <form method="post" action="/done">
134
+ <input type="hidden" name="id" value="2" />
135
+ <input class="btn btn-default" type="submit" value="未完了" />
136
+ </form>
137
+
138
+ </td>
139
+
140
+
141
+ </tr>
142
+ <tr>
143
+ <td>ss</td>
144
+ <br>
145
+ <td>1</td>
146
+ <td>(2019-08-22 )</td>
147
+ <td><a class="btn btn-default" href="/1/edit">編集</a></td>
148
+
149
+
150
+
151
+ <td>
152
+ <form method="post" action="/done">
153
+ <input type="hidden" name="id" value="1" />
154
+ <input class="btn btn-default" type="submit" value="未完了" />
155
+ </form>
156
+
157
+ </td>
158
+
159
+
160
+ </tr>
161
+
162
+
163
+
164
+ </tbody>
165
+ </table>
166
+
167
+ </div>
168
+ </body>
169
+ </html>
170
+ ```

2

追記

2019/08/22 02:30

投稿

pokerStars
pokerStars

スコア67

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  springbootのThymeleafでbootstrapを使いたいと思い、このようにしているのですがbootstrapが使えません。
2
2
  ```
3
+ <!DOCTYPE html>
3
4
  <html xmlns:th="http://www.thymeleaf.org">
4
5
  <head>
5
6
  <meta charset="UTF-8"/>
@@ -9,9 +10,69 @@
9
10
  <script src="/static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
10
11
 
11
12
  </head>
13
+ <body>
14
+
15
+ <div th:replace="/common.html::header"></div>
16
+
17
+ <hr/>
18
+ <div class="container">
19
+
20
+ <h3>新しいTodoを作成する</h3>
21
+
22
+ <form method="post" th:action="@{/}">
23
+ <div class="form-group">
24
+ <label class="control-label">ToDo名</label>
25
+ <input class="form-control" type="text" name="title" />
26
+ </div>
27
+
28
+ <div class="form-group">
29
+ <label class="control-label">期限</label>
30
+ <input class="form-control" type="text" name="day" />
31
+ <button class="btn btn-default" type="submit">ToDoの追加</button>
32
+ </div>
33
+
34
+ </form>
35
+
36
+
37
+ <table class="table table-bordered"> 
38
+ <tbody>
39
+ <tr th:each="list : ${lists}" th:object="${list}">
40
+ <td th:text="*{title}"></td>
41
+ <br>
42
+ <td th:text="*{day}"></td>
43
+ <td th:text="${#dates.format(list.createDay, '(yyyy-MM-dd )')}">(1970-01-01 )</td>
44
+ <td><a class="btn btn-default" th:href="@{/{id}/edit(id=*{id})}">編集</a></td>
45
+
46
+
47
+
48
+ <td>
49
+ <form th:unless="${list.done}" method="post" th:action="@{/done}" th:object="${list}">
50
+ <input type="hidden" name="id" th:value="*{id}" />
51
+ <input class="btn btn-default" type="submit" value="未完了" />
52
+ </form>
53
+ <form th:if="${list.done}" method="post" th:action="@{/restore}" th:object="${list}">
54
+ <input type="hidden" name="id" th:value="*{id}" />
55
+ <input class="btn btn-default" type="submit" value="完了" />
56
+ </form>
57
+ </td>
58
+
59
+
60
+ </tr>
61
+
62
+ <th:block th:if="${#lists.isEmpty(lists)}">
63
+ <p>登録されたToDoはございません</p>
64
+ </th:block>
65
+
66
+ </tbody>
67
+ </table>
68
+
69
+ </div>
70
+ </body>
71
+ </html>
12
72
  ```
13
73
 
14
- ![イメージ説明](49cadbe78bcd79991c99a907a981fcc9.png)
74
+ ![イメージ説明](8d1dd0ab1dff9e6afc543f777bd30ac3.png)
75
+ ![イメージ説明](1dd188cb378cf8d67bf90731857bd112.png)
15
76
  フォルダはこのように配置し,gradle bootRunでアプリを起動、http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
16
77
  どのようにすればbootstrapが使えるようになるのでしょうか?
17
78
  何卒よろしくお願い致します。

1

追記

2019/08/22 02:20

投稿

pokerStars
pokerStars

スコア67

title CHANGED
File without changes
body CHANGED
@@ -12,6 +12,6 @@
12
12
  ```
13
13
 
14
14
  ![イメージ説明](49cadbe78bcd79991c99a907a981fcc9.png)
15
- フォルダはこのように配置しているのすが、bootstrapが適用されません。
15
+ フォルダはこのように配置し,gradle bootRunアプリを起動http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
16
16
  どのようにすればbootstrapが使えるようになるのでしょうか?
17
17
  何卒よろしくお願い致します。