$$config title: [Django] 점프투장고 | 2-08 | 부트스트랩 keywords: - IT - django - 점프투장고 $$ # 개요 1. 개념과 설치 2. 질문 `목록` 템플릿에 부트스트랩 적용 3. 질문 `상세` 템플릿에 부트스트랩 적용 # 부트스트랩 ## 개념 부트스트랩(Bootstrap) - 디자이너의 도움 없이도 개발자 혼자서 디자인을 적용한 웹 페이지를 구현하도록 도와주는 프레임워크 ## 설치 부트스트랩 4.6.0 버전(버전 4의 마지막 버전)을 기준으로 실습을 진행 [부트스트랩 - https://getbootstrap.com/docs/4.6/getting-started/download/](https://getbootstrap.com/docs/4.6/getting-started/download/) 1. bootstrap-4.6.0-dist.zip 다운 2. `bootstrap.min.css` 파일을 카피하여 스태틱 디렉터리에 저장 ![부트스트랩 카피 경로](https://i.imgur.com/RUHh5zt.png) # 질문 목록 템플릿 : 부트스트랩 적용 먼저 질문 목록 템플릿에 부트스트랩을 다음처럼 적용하자. `[파일명: C:\projects\mysite\templates\pybo\question_list.html]` ```html {% load static %} {% if question_list %} (... 생략 ...) ``` 이제 부트스트랩 스타일을 적용 했으니 템플릿도 부트스트랩을 사용하도록 수정 `[C:\projects\mysite\templates\pybo\question_list.html]` ```html {% load static %} # 코드 추가 시작

{% if question_list %} {% for question in question_list %} {% endfor %} {% else %} {% endif %}

번호	제목	작성일시
{{ forloop.counter }}	{{ question.subject }}	{{ question.create_date }}
질문이 없습니다.

``` - 기존에는 \

{{question.answer_set.count}}개의 답변이 있습니다.

{% for answer in question.answer_set.all %}

{% endfor %}

{{ question.subject }}

{{question.answer_set.count}}개의 답변이 있습니다.

게시글 상세