Bootstrap 이용한 form 디자인 정리

-pip install django-bootstrap4

위 코드를 통해 우선 부트 스트랩을 설치한다

 

pinterest/settings.py

-settings.py의 installed_apps에 bootstrap4를 추가한다

---

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">
            <!--mt-3: margin-top 3배   col-6: 12가 100% 6이 50% 부모 크기의 절반으로 설정한 것! -->

        </form>
    </div>

</div>

{% endblock %}

- 상단에 {% load bootstrap4 %} 코드 작성

-로그인 폼안의 form 작성

{% bootstrap_form form %}

-->부트 스트랩이 적용된 로그인 폼으로 바뀐다

 

 

create.html

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

{% block content %}
<div style="text-align: center; max-width: 500px; margin: 4rem auto;">
    <div class="mb-4"><!--margin-bottom=mb-->
        <h4>Signup</h4>
    </div>
    <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 %}

-login.html과 동일하게 작성