2-13 : BootStrap

단 하나의 맥락

: FE 부분을 P/I로 쉽게 처리

 

---

Semiflow Bundle

- bootStrap 설치

- 필요 P/I 파일 static 폴더에 담기

- question_list.html 적용

- question_detail.html에 적용

---

자각

 

-

 

 

플러그인 설치를 위해

- 홈페이지에서 파일 형식의 P/I 번들인 폴더를 다운받음

- bootstrap-5.1.3-dist.zip/bootstrap-5.1.3-dist/css/bootstrap.min.css 를 카피해 static 폴더에 넣는다

 

 

-

 

 

question_list.html에 적용하기 위해

- 최상단에 

- <link rel="stylesheet"  type="text/css"  th:href="@{/bootstrap.min.css}">를 넣어 P/I를 인식할 수 있도록 한다

 

- <table></table> 바깥을 <div class="container my-3"></div> 로 감싼다 

- <table></table> 을 <table class="table"></table> 로 변경하여 CSS 처리

 

- <thead></thead>를 <thead class="table-dark"></thead> 로 변경하여 CSS 처리

- 헤드단의 table row는 그대로 들어가고 <th>번호</th> 엘리먼트만 추가

- 바디단의 table row는 순번 표시를 위해 <tr th:each="question, loop : ${questionList}"></tr> 로 변경처리

 

- 3개의 <td></td> 항목이 나오는데

- <td th:text="${loop.count}"></td>

- <td></td> 사이 <a th:href="@{|/question/detail/${question.id}|}"  th:text="${question.subject}"></a> 제목 링크처리

- <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td> 처리

 

-

 

(question_detail.html)

- 최상단 P/I 인식 처리

- 주제와 내용, 기 답변 리스트, 답변 등록 폼 전체를 <div class="container my-3></div>로 감싼다

 

 

 

- (1/3) Question 표시 :

제목 : <h2 class="border-bottom py-2" th:text="${question.subject}"></h2>

내용 틀 : <div class="card my-3"></div> 로 카드 테두리로 감싼 내부에 <div class="card-body"></div> 카드바디 구현

내용 구현 :

<div class="card-text"  style="white-space: pre-line" th:text="${question.content}"></div>

<div class="d-flex justify-content-end"></div> 내부에 <div class="badge bg-light text-dark p-2 text-start"><div>로 CSS를 만들고

<div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div> 시간 표시를 집어넣는다

 

- (2/3) 기 답변 표시

<h5 class="border-bottom my-3 py-2"  th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5> 로 갯수 표시

<div class="card my-3"  th:each="answer : ${question.answerList}"></div> 로 row를 반복한 후

<div class="card-body"></div> 로 카드 바디 구현

 

<div class="card-text"  style="white-space: pre-line" th:text="${answer.content}"></div> // 내용

<div class="d-flex justify-content-end"></div> 로 CSS를 만든 뒤

<div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>로 날짜 표시

 

- (3/3) 폼의 각 기능 CSS 코드 마지막에

(form)class="my-3" / (textarea)class="form-control" / (input type)class="btn btn-primary my-2" 추가한다

 

l="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div class="container my-3">
    <table class="table">
        <thead class="table-dark">
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성일시</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="question, loop : ${questionList}">
                <td th:text="${loop.count}"></td>
                <td>
                    <a 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>

 

 

 

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div 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-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변의 갯수 표시 -->
    <h5 class="border-bottom my-3 py-2" 
        th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
    <!-- 답변 반복 시작 -->
    <div class="card my-3" th:each="answer : ${question.answerList}">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 반복 끝  -->
    <!-- 답변 작성 -->
    <form th:action="@{|/answer/create/${question.id}|}" method="post" class="my-3">
        <textarea name="content" id="content" rows="10" class="form-control"></textarea>
        <input type="submit" value="답변등록" class="btn btn-primary my-2">
    </form>
</div>