14.Django(장고) - ecommerce 프로젝트 - 부트스트랩 적용

1.부트스트랩 설치

다운로드후 아래의 파일 2개를 static 폴더에 copy

https://getbootstrap.com/docs/5.3/getting-started/download/

2.부트스트랩 적용

templates\boards\post_list.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
{% if question_list %}
(... 생략 ...)

{% 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 post_list %}
        {% for post in post_list %}
          <tr>
            <td>{{post.id}}</td>
            <td>
              <a href="{% url 'boards:detail' post.id %}">{{ post.title }}</a>
            </td>
            <td>{{ post.created_at }}</td>
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="3">게시글이 없습니다</td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

이어서 댓글 템플릿에도 아래와 같이 부트스트랩을 적용한다.

[파일명:~templates\boards\post_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">{{ post.title }}</h2>
  <div class="card my-3">
    <div class="card-body">
      <div class="card-text" style="white-space: pre-line;">{{ post.content }}</div>
      <div class="d-flex justify-content-end">
        <div class="badge bg-light text-dark p-2">
          {{ post.created_at }}
        </div>
      </div>
    </div>
  </div>

  <!-- 댓글목록 -->
  <h5 class="border-bottom my-3 py-2">{{post.comment_set.count}}개의 댓글이 있습니다.</h5>
  {% for comment in post.comment_set.all %}
    <div class="card my-3">
      <div class="card-body">
        <div class="card-text" style="white-space: pre-line;">{{ comment.content }}</div>
        <div class="d-flex justify-content-end">
          <div class="badge bg-light text-dark p-2">
            {{ comment.created_at }}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}

  <!-- 댓글등록 -->
  {% comment %} <form action="{% url 'boards:reply_create' post.id %}" method="post">
    {% csrf_token %}
    <textarea name="content" id="content" rows="15"></textarea>
    <input type="submit" value="댓글등록">
  </form> {% endcomment %}
  <form action="{% url 'boards:reply_create' post.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>