[강의 공부] 14. django-bootstrap4 적용

⎷ django-bootstrap4

• django 프로젝트에 Bootstrap 프론트엔드 프레임워크를 쉽게 통합할 수 있게 해주는 라이브러리이다,
• 이 라이브러리를 사용하면 Bootstrap 컴포넌트를 django 템플릿에 보다 더 직접적이고 효율적으로 사용할 수 있다.
• django-bootstrap4 문서 링크

---

⎷ django-bootstrap4 설치 & 설정 방법

1) django-bootstrap4 설치

$ pip install django-bootstrap4

2) django settigns.py 파일의 INSTALLED_APPS에 bootstrap4 추가

INSTALLED_APPS = [
    ...
    'bootstrap4',
    ...
]

---

⎷ 사용 예시

django-bootstrap4를 사용하면 django 템플릿에서 Bootstrap 요소를 쉽게 렌더링할 수 있다.

[ 로그인 화면 변경 전, 변경 후 예시 ]

< login.html 변경 전 >

{% extends "base.html" %}

{% block content %}
    <div style="text-align: center">
        <div>
            <h4>Login</h4>
        </div>
        <div>
            <form action="" method="post">
                {% csrf_token %}
                {{ form }}
                <input type="submit" class="btn btn-primary">
            </form>
        </div>
    </div>
{% endblock %}

< login.html 변경 후 >

{% extends "base.html" %}
{% load bootstrap4 %}

{% block content %}
    <div style="text-align: center; max-width: 500px; margin: 4rem auto;">
        <div>
            <h4>Login</h4>
        </div>
        <div>
            <form action="" method="post">
                {% csrf_token %}
                {% bootstrap_form form %}
                <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
            </form>
        </div>
    </div>
{% endblock %}

• {% load bootstrap4 %}:
  bootstrap 라이브러리 사용하기 위해 import 하는 과정
• {% bootstrap_form form %}:
  기존의 {{ form }}을 변경한 것. django-bootstrap4의 템플릿 태그 {% bootstrap_form %}을 사용해서 django 폼을 Bootstrap 스타일로 자동 렌더링한다.

django-bootstrap4 적용한 것 이외에도 몇가지 손본게 있긴 한데,
그래도 많이 예뻐졌다 ㅎㅎ.

---

⎷ 참고 (폰트 사이즈 등등 스타일 변경해도 적용이 안된다면!?)

브라우저의 캐시를 의심해보아야 한다.
폰트 사이즈를 변경하려고 하는데 적용이 안되서 보니까, 브라우저 캐시 기능이 자동으로 켜져 있어서 실시간 변경사항이 보이지 않았던 것이다.

개발자도구 > Network > Disable cache 선택해서 켜주면 된다.