Оформление страницы входа

Мы усовершенствовали внешний вид страницы входа, но формы входа изменения пока не коснулись. Приведем внешний вид формы в соответствие с остальными элементами страницы:

{% extends "learning_logs/base.html" %}

(1) {% load bootstrap3 %}

(2){% block header %}

<h2>Log in to your account.</h2>

{% endblock header %}

{% block content %}

. .

(3) <form method="post" action="{% url 'users:login' %}" class="form">

{% csrf_token %}

(4) . .{% bootstrap_form form %}

(5) . .{% buttons %}

. . <button name="submit" class="btn btn-primary">log in</button>

. .{% endbuttons %}

. .

</form>

. .

{% endblock content %}

В точке (1) в шаблон загружаются шаблонные теги bootstrap3. В точке (2) определяется блок header, который описывает, для чего нужна страница. Обратите внимание: блок {% if form.errors %} удален из шаблона; django-bootstrap3 управляет ошибками формы автоматически.

В точке (3) добавляется атрибут class="form", после чего при отображении формы (4) используется шаблонный тег {% bootstrap_form %}; он заменяет тег {{ form.as_p }}, используемый в главе 19. Шаблонный тег {% booststrap_form %} вставляет правила в стиле Bootstrap в отдельные элементы формы при ее построении. В точке (5) открывается шаблонный тег bootstrap3 {% buttons %}, который добавляет стилевое оформление Bootstrap к кнопкам.

На рис. 20.2 показана форма входа так, как она выглядит сейчас. Страница стала намного чище, ее оформление — последовательно, а предназначение — предельно ясно.

Рис. 20.2. Страница входа, оформленная с использованием Bootstrap

Попробуйте выполнить вход с неверным именем пользователя или паролем; вы увидите, что даже сообщения об ошибках следуют тому же стилю оформления и хорошо интегрируются с сайтом в целом.