質問編集履歴

4

追記

2019/08/22 02:36

投稿

pokerStars
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
+ ```

3

追記

2019/08/22 02:30

投稿

pokerStars
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
 

2

追記

2019/08/22 02:20

投稿

pokerStars
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
 

1

追記

2019/08/22 02:05

投稿

pokerStars
test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,6 @@
1
1
  springbootのThymeleafでbootstrapを使いたいと思い、このようにしているのですがbootstrapが使えません。
2
2
 
3
3
  ```
4
-
5
- <!DOCTYPE html>
6
4
 
7
5
  <html xmlns:th="http://www.thymeleaf.org">
8
6
 
@@ -22,324 +20,14 @@
22
20
 
23
21
  </head>
24
22
 
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
-
143
23
  ```
144
24
 
145
25
 
146
26
 
147
- ![イメージ説明](8d1dd0ab1dff9e6afc543f777bd30ac3.png)
27
+ ![イメージ説明](49cadbe78bcd79991c99a907a981fcc9.png)
148
28
 
149
- ![イメージ説明](1dd188cb378cf8d67bf90731857bd112.png)
150
-
151
- フォルダはこのように配置し,gradle bootRunアプリを起動http://localhost:8080/ にアクセスして確認しましたがbootstrapが適用されません。
29
+ フォルダはこのように配置しているのすが、bootstrapが適用されません。
152
30
 
153
31
  どのようにすればbootstrapが使えるようになるのでしょうか?
154
32
 
155
33
  何卒よろしくお願い致します。
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
- ```
340
-
341
-
342
-
343
- ![イメージ説明](c36343440d627a4260e6bf4e4f07e873.png)
344
-
345
- ![イメージ説明](c6de6d50750a8c75f6491cd95caec407.png)