38 부트스트랩 적용하기

38 부트스트랩? (Bootstrap)

부스트랩은 웹사이트 좀더 쉽게 빠르게 만들수 있게 도와주는 프레임워크입니다.
HTML, CSS, JS 가 테마, 템플릿 형태로 만들어져 있고, 크로스 브라우저 호환이 되어 크게 신경쓰지 않아서 좋습니다.

미리 디자인 되어 있는 사이트를 받아 수정해서 쓴다라고 생각하시면 됩니다.

38.2 부트스트랩 팀플릿 다운로드 - start Bootstrap

https://startbootstrap.com/

startbootstrap 사이트에서
SB Admin 이라는 템플릿을 다운받았습니다.

38.3 templates 디렉토리 위치 이동 - base.py

저와 동일하게 프로젝트 레이아웃을 구성하셨다면
templates 디렉토리를
myapp 밑으로 이동시켜 주시고, base.py내의 templates_dir path 도 변경해주셔야 합니다.

뭔가 구조가 좀 이상하다 싶었는데,
부트스트랩 작업 할려고 보니 구조가 이상해서 변경했습니다.

1
TEMPLATES_DIR = os.path.join(APPS_DIR, 'templates')

디렉토리 이동과 base.py 변경이 되었으면
장고를 구동시켜 이상없는지 확인합니다.

1
python manage.py runserver

38.4 부트스트랩 js,css, 파일 복사

다운받은 부투스트랩 파일을 내 프로젝트 폴더로 옮기세요.

1) confg/settings/base.py 에 static에 대한 내용을 추가합니다.
2) myapp/ 에 static 폴더를 만듭니다.
3) 38.2 에서 다운로드파일 압축해제 후 dist안의 js, css, assets 폴더를 myapp/static 폴더로 복사합니다.
4) dist/index.html 을 myapp/templates에 복사합니다.
5) myapp/templates에 base폴더를 생성합니다.

1
2
3
4
#confg/settings/base.py 
STATICFILES_DIRS = [os.path.join(APPS_DIR , "static")]
STATICFILES_FINDERS = ["django.contrib.staticfiles.finders.FileSystemFinder",
                    "django.contrib.staticfiles.finders.AppDirectoriesFinder",]

38.5 부트스트랩 인덱스 페이지 작업 - index.html

부트스트랩 인덱스 페이지를 띄워보겠습니다.

1) urls.py 에 index 경로를 설정합니다.
2) views.py에 index 관련 클래스를 하나 추가합니다.
3) index.html 파일에서 satic 파일의 경로를 변경합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#myapp/blog/urls.py
path("", views.firstIndex.as_view(), name="first_index"), 

#myapp/blog/views.py
class firstIndex(generic.ListView):
    def __init__(self):
        self.title_nm       = "PytnoBlog에 오신것을 환영합니다. "
        self.ogImgUrl       = ""
        self.descript       = ""
        self.template_name  = "index.html"

    def get(self, request, *args, **kwargs):
        self.content = {"descript":self.descript,
                        "title_nm":self.title_nm,
                        "ogImgUrl":self.ogImgUrl,                                               
                        "dataList":""}

        return render(request, self.template_name, self.content)

#myapp/templates/index.html
{% load static %}

 <link href="{% static 'css/styles.css' %}" rel="stylesheet" />

38.6 부트스트랩 적용확인

style.css가 적용되었네요.
메뉴도 눌러보세요.

여기까지 개발하면서 텍스트 화면만 보다가
컬러가 적용되니 뭔가 뿌듯합니다.^__^