728x90
부트스트랩(Bootstrap)을 활용한 form디자인
01 아래 command를 통해 django-bootstrap4라이브러리 설치
pip install django-bootstrap4
02. settings.py의 INSTALLED_APPS에 bootstrap4를 추가
settings.py
INSTALLED_APPS = [
...
"bootstrap4",
]
03. cdn방식을 이용하거나, 04.이후의 과정으로 컴파일된 css파일을 프로젝트에 추가
〔cdn방식〕이하를 base html의 head 부분에 적용후 07. 부터 진행
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
04. 컴파일된 css파일을 다운로드
https://getbootstrap.com/docs/5.3/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
05. 다운로드 후 zip파일을 해제후, 이하 파일을 프로젝트에 포함
bootstrap.min.css
bootstrap.min.css.map
06. base html에 적용
_base_user.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css 적용 -->
<link rel="stylesheet" href = "{% static 'css/style.css' %}">
<link rel="stylesheet" href = "{% static 'css/bootstrap.min.css' %}">
<title>Bookbyte</title>
{% block head-content %}{% endblock %}
</head>
<body>
{% block body-content %}
{% endblock %}
</body>
</html>
07. html에 폼 적용
login.html
{% extends "_base_user.html" %}
{% load bootstrap4 %}
{% block head-content %}
{% endblock %}
{% block body-content %}
<div>
<h1>로그인</h1>
<form method="POST">
{% csrf_token %}
{% bootstrap_form form %}
<button type="submit">로그인</button>
<button type="reset">취소</button>
</form>
</div>
{% endblock %}
728x90
'03_Web' 카테고리의 다른 글
| [css]마우스오버 효과(마우스 커서 올릴 때 hover 효과) (0) | 2025.05.30 |
|---|---|
| 무료아이콘 웹에 적용하기(FONT AWESOME) (0) | 2025.05.27 |
| [Django]로그인 기능 구현 (4) | 2025.05.23 |
| [Django]Paginator를 활용한 페이징(paging) (3) | 2025.05.22 |
| [Django]장고 템플릿 태그 주석 다는법 (0) | 2025.05.22 |