Bootstrap을 이용한 Form 디자인 정리
django-bootstrap4를 설치한다
settings.py에 추가해준다.
login.html에서
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<div style="text-align: center">
<div>
<h4>Login</h4>
</div>
<div>
<form action="" method="post">
{% csrf_token %}
<!--{{ form }}-->
{% bootstrap_form form %}
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
{% endblock %}상단에 {% load bootstrap4 %}를 추가해주고, form 대신 {% bootstrap_form form %}로 변경해준다.
bootstrap이 적용된 form을 볼 수 있다.
style을 살짝 추가해주었다.
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<div style="text-align: center; max-width: 500px; margin: 4rem auto">
<div class="mb-4">
<h4>Signup</h4>
</divclas>
<form action="{% url 'accountapp:create' %}" method="post">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
</form>
</div>
{% endblock %}create.html 파일도 변경해준다.
static 파일에 글꼴을 추가해주고
head.html파일에
<style>
@font-face{
font-family: 'NanumGothic';
src: local('NanumGothic'),
url("{% static 'fonts/NanumGothic.otf'%}") format("opentype");
}
@font-face{
font-family: 'NanumSquareB';
src: local('NanumSquareB'),
url("{% static 'fonts/NanumSquareB.otf'%}") format("opentype");
}
</style>폰트 style을 추가해준뒤 base.html의 body style에
<body style="font-family: 'NanumSquareB'">를 추가해준다.
'기타 > django' 카테고리의 다른 글
| 작정하고 장고 - UpdateView, DeleteView (0) | 2023.05.13 |
|---|---|
| 작정하고 장고 - DetailView를 활용한 개인 페이지 구현 (0) | 2023.05.11 |
| 작정하고 장고 - login, logout 구현 (0) | 2023.05.09 |
| 작정하고 장고 - CreateView를 통한 회원가입 구현 (0) | 2023.05.08 |
| 작정하고 장고 - for 루프, 디버깅 (0) | 2023.04.11 |
댓글