質問編集履歴

4

追記

2019/08/22 02:36

投稿

pokerStars
pokerStars

スコア67

test CHANGED
File without changes
test CHANGED
@@ -337,3 +337,9 @@
337
337
  </html>
338
338
 
339
339
  ```
340
+
341
+
342
+
343
+ ![イメージ説明](c36343440d627a4260e6bf4e4f07e873.png)
344
+
345
+ ![イメージ説明](c6de6d50750a8c75f6491cd95caec407.png)

3

追記

2019/08/22 02:36

投稿

pokerStars
pokerStars

スコア67

test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,187 @@
153
153
  どのようにすればbootstrapが使えるようになるのでしょうか?
154
154
 
155
155
  何卒よろしくお願い致します。
156
+
157
+
158
+
159
+ ソースを表示
160
+
161
+ ```ここに言語を入力
162
+
163
+ <!DOCTYPE html>
164
+
165
+ <html>
166
+
167
+ <head>
168
+
169
+ <meta charset="UTF-8"/>
170
+
171
+ <title>Todoリスト</title>
172
+
173
+ <link rel="stylesheet" href="/css/bootstrap.css">
174
+
175
+ <script src="/js/jquery.js"></script>
176
+
177
+ <script src="/js/bootstrap.js"></script>
178
+
179
+
180
+
181
+ </head>
182
+
183
+ <body>
184
+
185
+
186
+
187
+ <div style="background:darkseagreen">
188
+
189
+ <a href="/">TODOリスト</a>
190
+
191
+ <a href="search">検索</a>
192
+
193
+
194
+
195
+
196
+
197
+ </div>
198
+
199
+
200
+
201
+ <hr/>
202
+
203
+ <div class="container">
204
+
205
+
206
+
207
+ <h3>新しいTodoを作成する</h3>
208
+
209
+
210
+
211
+ <form method="post" action="/">
212
+
213
+ <div class="form-group">
214
+
215
+ <label class="control-label">ToDo名</label>
216
+
217
+ <input class="form-control" type="text" name="title" />
218
+
219
+ </div>
220
+
221
+
222
+
223
+ <div class="form-group">
224
+
225
+ <label class="control-label">期限</label>
226
+
227
+ <input class="form-control" type="text" name="day" />
228
+
229
+ <button class="btn btn-default" type="submit">ToDoの追加</button>
230
+
231
+ </div>
232
+
233
+
234
+
235
+ </form>
236
+
237
+
238
+
239
+
240
+
241
+ <table class="table table-bordered"> 
242
+
243
+ <tbody>
244
+
245
+ <tr>
246
+
247
+ <td>aa</td>
248
+
249
+ <br>
250
+
251
+ <td>2</td>
252
+
253
+ <td>(2019-08-22 )</td>
254
+
255
+ <td><a class="btn btn-default" href="/2/edit">編集</a></td>
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+ <td>
264
+
265
+ <form method="post" action="/done">
266
+
267
+ <input type="hidden" name="id" value="2" />
268
+
269
+ <input class="btn btn-default" type="submit" value="未完了" />
270
+
271
+ </form>
272
+
273
+
274
+
275
+ </td>
276
+
277
+
278
+
279
+
280
+
281
+ </tr>
282
+
283
+ <tr>
284
+
285
+ <td>ss</td>
286
+
287
+ <br>
288
+
289
+ <td>1</td>
290
+
291
+ <td>(2019-08-22 )</td>
292
+
293
+ <td><a class="btn btn-default" href="/1/edit">編集</a></td>
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+ <td>
302
+
303
+ <form method="post" action="/done">
304
+
305
+ <input type="hidden" name="id" value="1" />
306
+
307
+ <input class="btn btn-default" type="submit" value="未完了" />
308
+
309
+ </form>
310
+
311
+
312
+
313
+ </td>
314
+
315
+
316
+
317
+
318
+
319
+ </tr>
320
+
321
+
322
+
323
+
324
+
325
+
326
+
327
+ </tbody>
328
+
329
+ </table>
330
+
331
+
332
+
333
+ </div>
334
+
335
+ </body>
336
+
337
+ </html>
338
+
339
+ ```

2

追記

2019/08/22 02:30

投稿

pokerStars
pokerStars

スコア67

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  springbootのThymeleafでbootstrapを使いたいと思い、このようにしているのですがbootstrapが使えません。
2
2
 
3
3
  ```
4
+
5
+ <!DOCTYPE html>
4
6
 
5
7
  <html xmlns:th="http://www.thymeleaf.org">
6
8
 
@@ -20,11 +22,131 @@
20
22
 
21
23
  </head>
22
24
 
25
+ <body>
26
+
27
+
28
+
29
+ <div th:replace="/common.html::header"></div>
30
+
31
+
32
+
33
+ <hr/>
34
+
35
+ <div class="container">
36
+
37
+
38
+
39
+ <h3>新しいTodoを作成する</h3>
40
+
41
+
42
+
43
+ <form method="post" th:action="@{/}">
44
+
45
+ <div class="form-group">
46
+
47
+ <label class="control-label">ToDo名</label>
48
+
49
+ <input class="form-control" type="text" name="title" />
50
+
51
+ </div>
52
+
53
+
54
+
55
+ <div class="form-group">
56
+
57
+ <label class="control-label">期限</label>
58
+
59
+ <input class="form-control" type="text" name="day" />
60
+
61
+ <button class="btn btn-default" type="submit">ToDoの追加</button>
62
+
63
+ </div>
64
+
65
+
66
+
67
+ </form>
68
+
69
+
70
+
71
+
72
+
73
+ <table class="table table-bordered"> 
74
+
75
+ <tbody>
76
+
77
+ <tr th:each="list : ${lists}" th:object="${list}">
78
+
79
+ <td th:text="*{title}"></td>
80
+
81
+ <br>
82
+
83
+ <td th:text="*{day}"></td>
84
+
85
+ <td th:text="${#dates.format(list.createDay, '(yyyy-MM-dd )')}">(1970-01-01 )</td>
86
+
87
+ <td><a class="btn btn-default" th:href="@{/{id}/edit(id=*{id})}">編集</a></td>
88
+
89
+
90
+
91
+
92
+
93
+
94
+
95
+ <td>
96
+
97
+ <form th:unless="${list.done}" method="post" th:action="@{/done}" th:object="${list}">
98
+
99
+ <input type="hidden" name="id" th:value="*{id}" />
100
+
101
+ <input class="btn btn-default" type="submit" value="未完了" />
102
+
103
+ </form>
104
+
105
+ <form th:if="${list.done}" method="post" th:action="@{/restore}" th:object="${list}">
106
+
107
+ <input type="hidden" name="id" th:value="*{id}" />
108
+
109
+ <input class="btn btn-default" type="submit" value="完了" />
110
+
111
+ </form>
112
+
113
+ </td>
114
+
115
+
116
+
117
+
118
+
119
+ </tr>
120
+
121
+
122
+
123
+ <th:block th:if="${#lists.isEmpty(lists)}">
124
+
125
+ <p>登録されたToDoはございません</p>
126
+
127
+ </th:block>
128
+
129
+
130
+
131
+ </tbody>
132
+
133
+ </table>
134
+
135
+
136
+
137
+ </div>
138
+
139
+ </body>
140
+
141
+ </html>
142
+
23
143
  ```
24
144
 
25
145
 
26
146
 
27
- ![イメージ説明](49cadbe78bcd79991c99a907a981fcc9.png)
147
+ ![イメージ説明](8d1dd0ab1dff9e6afc543f777bd30ac3.png)
148
+
149
+ ![イメージ説明](1dd188cb378cf8d67bf90731857bd112.png)
28
150
 
29
151
  フォルダはこのように配置し,gradle bootRunでアプリを起動、http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
30
152
 

1

追記

2019/08/22 02:20

投稿

pokerStars
pokerStars

スコア67

test CHANGED
File without changes
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  ![イメージ説明](49cadbe78bcd79991c99a907a981fcc9.png)
28
28
 
29
- フォルダはこのように配置しているのですbootstrapが適用されません。
29
+ フォルダはこのように配置し,gradle bootRunでアプリを起動、http://localhost:8080/ にアクセスし確認しましたがbootstrapが適用されません。
30
30
 
31
31
  どのようにすればbootstrapが使えるようになるのでしょうか?
32
32