< django - 10 >

10. 부트스트랩 설치 및 적용

 

 

 

# 부트스트랩 설치 및 질문 목록에의 적용

1. 부트스트랩 설치 -> projects\mysite\templates\pybo\question_list.html 파일에 아래처럼 부트스트랩 적용

+ 코드의 맨 위에 {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"> 추가함

 

 

 

2. 템플릿이 부트스트랩을 사용할 수 있도록 아래처럼 projects\mysite\templates\pybo\question_list.html 파일을 수정

Line 3 ~ 끝까지 다 수정

+ <ul> 태그를 사용하지 않고 질문 목록을 테이블 구조로 변경

 

+ 작성일시 항목과 번호 추가 (Line 7 ~ 9)

+ Line 16의 {{ forloop.counter }}는 for 문의 현재 순서를 의미

 

+ class="container my-3", class="table", class="table-dark" 등은 부트스트랩 스타일에 정의되어 있는 클래스임

(Line 3, 4, 6)

 

 

 

3. http://localhost:8000/pybo/ 페이지를 호출하여 부트스트랩이 질문 목록에 적용됨을 확인

 

 

 

 

# 부트스트랩의 질문 상세 템플릿에의 적용

1. projects\mysite\templates\pybo\question_detail.html 파일을 아래와 같이 수정

+ 질문, 답변에 관한 사항은 부트스트랩의 card 컴포넌트 사용

+ 질문과 답변 내용에는 style="white-space: pre-line;" 과 같은 글 내용의 줄 바꿈을 정상적으로 표시하기 위한 스타일 지정 (Line 8, 21)

 

+ 사용한 부트스트랩 클래스

부트스트랩 클래스	의미
card card-body card-text	부트스트랩 Card 컴포넌트
badge	부트스트랩 Badge 컴포넌트
form-control form-label	부트스트랩 Form 컴포넌트
border-bottom	부트스트랩 Form 컴포넌트
my-3	상하 마진값 =  3
py-2	상하 패딩값 = 2
p-2	상하좌우 패딩값 = 2
d-flex justify-content-end	컴포넌트의 우측 정렬
bg-light	연회색 배경
text-dark	글자 색을 검정으로
text-start	좌측 정렬
btn btn-primary	부트스트랩 버튼 컴포넌트

 

 

 

2. http://localhost:8000/pybo/3/ 페이지를 요청하여 질문 상세 화면에 부트스트랩이 적용됨을 확인