728x90
더보기
Day81. 230824
SpringBoot에 부트스트랩5 적용하기
부트스트랩5는 제이쿼리를 지원하지 않는다.
https://getbootstrap.com/docs/5.2/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
부트스트랩5를 사용하기 위해 먼저 css파일을 다운로드 받아준다.
다운받아준 파일을 resources/static 폴더에 넣어준다.
layout.html에 다운받은 파일 경로를 넣어준다.
question_list.html>
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<table class="table">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>(t)id</th>
<th>제목</th>
<th>질문등록일</th>
</tr>
</thead>
<tbody>
<tr th:each="question, loop : ${questionList}">
<td th:text="${loop.count}"></td>
<td th:text="${question.id}"></td>
<td>
<!-- th:href속성에서 주소를 나타낼때에는 반드시 @{}을 이용
@{URL}
주의 : URL이 조합되어질때에는 @{||} 작성해야한다. -->
<a href="/question/detail/${question.id}"
th:href="@{|/question/detail/${question.id}|}"
th:text="${question.subject}"></a>
</td>
<td th:text="${#temporals.format(question.createDate,'yyyy-MM-dd HH:mm')}"></td>
</tr>
</tbody>
</table>
</div>
<tr th:each="question, loop : ${questionList}"> <td th:text="${loop.count}"></td> 타임리프를 사용해 목록이 출력될 수 있도록 하였다.
<td th:text="${#temporals.format(question.createDate,'yyyy-MM-dd HH:mm')}"></td> 날짜를 yyyy-MM-dd HH:mm 형태롤 나오도록 처리해주었다.
다음과 같이 부트스트랩이 적용되었다.
question_detail.html>>
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<!--질문-->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space:pre-line;" th:text="${question.content}"></div>
<div class="d-flax justify-content-end">
<div class="badge bg-light text-dark p-2 text-start" th:text="${#temporals.format(question.createDate,'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div>
<!-- 답변갯수 출력 -->
<h5>답변갯수출력</h5>
<!-- 반복:답변목록시작 -->
<div>반복:답변목록출력예정</div>
<div>반복:답변목록출력예정</div>
<div>반복:답변목록출력예정</div>
<!-- 반복:답변목록끝 -->
<!-- 답변등록폼 -->
<form>답변등록폼</form>
</div>
728x90
'개발 수업 > Spring Boot' 카테고리의 다른 글
| [SpringBoot] QnA게시판 질문 등록 (0) | 2023.08.27 |
|---|---|
| [SpringBoot] 게시판 상세조회 댓글 수/댓글 출력 (0) | 2023.08.27 |
| [SpringBoot] thymeleaf 타입별 사용법/thymeleaf 템플릿 기능 (0) | 2023.08.24 |
| [SpringBoot] 목록조회, 상세조회 (0) | 2023.08.24 |
| [SpringBoot] JPA사용하기 (0) | 2023.08.22 |
