부트스트랩(bootstrap) django에 연결하기

부트스트랩 템플릿을 연결하는 연습을 하기 위해서 일단 아래의 부트스트랩 템플릿 파일을 다운 받는다.

startbootstrap-creative-1.0.2.zip

1. 압출파일을 열어보면 아래와 같은 파일들이 들어있다.

2. 이 중에서 index.html을 복사해서 기존의 index.html을 덮어씌운다.

(그냥 코드를 다 복사해서 붙여넣기해도 된다.)

프로젝트 폴더에서 templates를 찾으면된다.

예시의 경우 경로가

review > blog > templates > blog 이다.

3. 앱 폴더안에 static 폴더를 하나 생성한다.

4. css, fonts, img 등의 폴더를 모두 복사해서 static 폴더안에 넣는다.

5. 일단 이동이 완성 된 모습은 다음과 같을 것이다.

6. 부트스트랩 설정이 완료된 것을 확인하기 전에 일단 현재 상태를 한 번 확인해보자.

cmd 창을 열고, 프로젝트 폴더에서 manage.py runserver 명령어를 통해 서버를 구동시키고

브라우저에서 localhost:8000으로 접속한다.

다음과 같이 뜨는 것이 정상이다.

딱 봐도 뭔가 문제가 있는 것을 알 수 있다.

7. 설정을 위하여, settings.py를 열자!

그리고 

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

을 가장 하단에 입력해준다.

8. 그 다음으로 해야할 작업은 css와 javascript의 경로를 연결하는 것이다.

index.html을 열어보자.

9. href로 css파일의 경로를 지정하고 있는 부분을 찾아서 바꿔준다.

href='{% static "css/bootstrap.min.css" %}'

이런식으로 바꿔주면 된다.

상단부의 css파트에서 4군데, 하단의 javascript파트에서 6군데가 있다.

10. 최상단에 아래의 코드를 입력해준다.

{% load staticfiles %}

11. server를 구동하여 확인해보자.

성공했다고 좋아하고 있을텐데, 하단으로 마우스 스크롤을 내려보면!

이미지 파일을 불러오지 못해서 나타난 결과다.

12. 이미지 파일들의 경로도 지정해주자.

방식은 위와 동일하다. 

총 6개의 이미지 파일을 지정해주어야한다.

13. 다시 확인해보자!

아래와 같은 화면이 나오면 성공이다!