Django - 부트스트랩

● 부트스트랩

부트스트랩 설치
https://getbootstrap.com/docs/5.1/getting-started/download/
* 자세한 설명 : https://wikidocs.net/70838

 

※ 부트스트랩 주의사항

부트스트랩은 3.x, 4.x, 5.x 등의 버전이 존재하고 메이저 번호(3, 4, 5)에 따라 그 사용방법이 다르다.
프로젝트 관련 버전에 맞게 사용하는 것이 중요하다.

** bootstrap.min.css 파일 static 폴더에 붙여넣기

---

※ 부트스트랩 저장 경로

projects\mysite\static\bootstrap.min.css

---

- 부트스트랩 적용

[파일명: projects\mysite\templates\pybo\question_list.html] 수정

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<div class="container my-3">
    <table class="table">
        <thead>
            <tr class="table-dark">
                <th>번호</th>
                <th>제목</th>
                <th>작성일자</th>
            </tr>
        </thead>
        <tbody>
            {% if question_list %} <!-- question_list가 존재하면 -->
            {%for question in question_list %} <!-- for 반복문 사용, :(콜론) 미사용 -->
            <tr>
                <td>{{ forloop.counter }}</td> <!-- 번호 출력 -->
                <td>
                    <a href="{% url 'pybo:detail' question.id %}">{{question.subject}}</a> <!-- 제목 출력 -->
                </td>
                <td>{{ question.create_date }}</td> <--! 작성일 출력 -->
            </tr>
            {% endfor %} <!-- for 반복문이 끝나니 필수 작성 -->
            {% else %} <!-- 데이터가 없을 경우 -->
            <tr>
                <td colspan="3">질문이 업습니다.</td>
            </tr>
            {% endif %} <!-- if문 종료 -->
        </tbody>
    </table>
</div>

** for 문의 현재 순서를 의미하는 {{ forloop.counter }} 사용
** class="container my-3", class="table", class="table-dark" 등은 부트스트랩 스타일에 정의되어 있는 클래스
** 부트스트랩 참조 URL : https://getbootstrap.com/docs/5.1/getting-started/introduction/

---

- 질문 상세 템플릿 부트스트랩 적용

[파일명: projects\mysite\templates\pybo\question_detail.html]

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<div class="container my-3">
    <!-- 질문 -->
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2">
                    {{ question.create_date }}
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 -->
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2">
                    {{ answer.create_date }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <!-- 답변 등록 -->
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        <div class="mb-3">
            <label for="content" class="form-label">답변내용</label>
            <textarea name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>

부트스트랩 card 컴포넌트 : 
https://getbootstrap.com/docs/5.1/components/card/

---

※ 사용한 부트스트랩 클래스 표

부트스트랩 클래스	설명
card, card-body, card-text	부트스트랩 Card 컴포넌트
badge	부트스트랩 Badge 컴포넌트
form-control, form-label	부트스트랩 Form 컴포넌트
border-bottom	아래방향 테두리 선
my-3	상하 마진값 3
py-2	상하 패딩값 2
p-2	상하좌우 패딩값 2
d-flex justify-content-end	컴포넌트의 우측 정렬
bg-light	연회색 배경
text-dark	검은색 글씨
text-start	좌측 정렬
btn btn-primary	부트스트랩 버튼 컴포넌트

** 질문 내용과 답변 내용에는 style="white-space: pre-line;" 타일을 지정 // 글 내용의 줄 바꿈 정상 표시