[SpringBoot] 부트스트랩5 적용

개발 수업/Spring Boot

[SpringBoot] 부트스트랩5 적용

오늘 하루s 2023. 8. 24. 23:27

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