[Django] Bootstrap5 vscode 적용하기

설치 방법은 

1. django bootstrap5 설치

2. compiled CSS and JS download 해서 프로젝트에 적용

3. npm 이용한 bootstrap dist 적용

 

세가지가 있다. 이외의 방법도 있다.

 

이번 포스팅에서는 1, 2번 내용을 담아봤습니다~ 

1. django bootstrap5 설치

(1) pip를 이용하여 설치

python -m pip install django-bootstrap5

(2) setting.py 추가

INSTALLED_APPS = (
    # ...
    'django_bootstrap5',
    # ...
)

 

2. compiled CSS and JS download

(1) Bootstrap 공식 사이트에서 Compiled CSS and JS 파일을 download

 

Download

 (2) 프로젝트 하위에 "static" 폴더 생성

     다운받은 폴더의 압풀을 풀고 ...\bootstrap-5.0.2-dist\css\bootstrap.min.css 파일을 "static" 폴더에 추가한다.

 (3) setting.py 

import os
...

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

 

 (4) html 예제

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<div class="container my-3">
    <button type="button" class="btn btn-primary">
        New Item <span class="badge badge-light">4</span>
      </button>
</div>

bootstrap이 적용된 것을 확인 할 수 있다.

 

 

3번은 다음에 포스팅하도록 하겠습니다~