Programming/Python
Django - BootStrap 부트스트랩 적용하기
사족보행 개발자
2022. 5. 4. 14:31
728x90
Django의 경우, Bootstrap 적용하는 방법이 따로 있다.
일단 들어가기에 앞서서 bootstrap library를 다운 받아주자.
pip install django-bootstrap5장고의 bootstrap을 다운 받은 뒤에, project 폴더 내부에 있는 settings.py에 들어가서
INSTALLED_APP 부분에 bootstrap을 넣어 장고 컴파일러가 이를 읽을 수 있게 해줘야 한다.
INSTALLED_APPS = [
...
...
'bootstrap5',
]이 후,
root 디렉토리에 존재하는 template 중, head 태그를 맡은 부분으로 들어가서
head 태그 내부에 아래 구문을 붙여준다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>이제 장고에서 부트스트랩을 사용하기 위한 모든 준비는 끝났다.
부트스트랩을 사용할 앱의 템플릿으로 들어가서 아래 구문을 최상단에 넣어준다.
(만일 tamplate을 불러오는 extends 구분이 존재한다면, 아래처럼 그 밑에 넣어줘야 한다.)
{% extends 'base.html' %}
{% load bootstrap5 %}
{% block content %}
<div>
Hello_world
</div>
{% endblock %}부트스트랩의 적용은 아래처럼 class에 넣어서 적용시켜주면 된다.
<input type="submit" class="btn btn-dark col-6 mt-2"/>
위의 소스 bootstrap 적용시,
728x90