Django/Bootstrap 模板渲染

Question

我目前正在使用 Django 和 Bootstrap 编写一个网站。 我首先创建了模板和模型，现在，我正在实现控制器。一切都还没有实现，但我需要一些帮助。我想知道如何使用 Boostrap 网格系统呈现 Django 身份验证表单。我正在使用 Boostrap 4 和 Django 2.0.4。

我的旧形式是这样的：

<div class="jumbotron">
    <form class="form-horizontal" method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <div class="form-group">
            <div class="col-lg-4 offset-lg-4">
                <label class="control-label" for="usernameInput">{{ form.username.label_tag }}</label>
                <input id="usernameInput" type="text" name="{{ form.field.html_name }}" value="{{ form.username }}" class="form-control"
                       placeholder="Username">
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-4 offset-lg-4">
                <label class="control-label" for="passwordInput">{{ form.password.label_tag }}</label>
                <input id="passwordInput" type="password" name="{{ form.field.html_name }}" value="{{ form.field.value }}" class="form-control"
                       placeholder="Password">
            </div>
        </div>

        <div class="container" id="btn_login">
            <button type="submit" class="btn btn-primary btn-md" value="login" role="button">Log in</button>
            <input type="hidden" name="next" value="{{ next }}"/>
        </div>
    </form>

    <span class="container" id="forgotten_password">
        <a href="">Forgot your password ?</a>
    </span>
</div>

这是新的：

<div class="jumbotron">
    {% load widget_tweaks %}

    <form class="form-horizontal" method="post" action="{% url 'login' %}">
        {% csrf_token %}

        {% for hidden_field in form.hidden_fields %}
            {{ hidden_field }}
        {% endfor %}

        {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}

        {% for field in form.visible_fields %}
            <div class="form-group">
                {{ field.label_tag }}

                {% if form.is_bound %}
                    {% if field.errors %}
                        {% render_field field class="form-control" %}
                        {% for error in field.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                    {% else %}
                        {% render_field field class="form-control" %}
                    {% endif %}
                {% else %}
                    {% render_field field class="form-control" %}
                {% endif %}

                {% if field.help_text %}
                    <small class="form-text text-muted">{{ field.help_text }}</small>
                {% endif %}
            </div>
        {% endfor %}

        <div class="container" id="btn_login">
            <button type="submit" class="btn btn-primary btn-md" role="button">Log in</button>
        </div>
    </form>

    <span class="container" id="forgotten_password">
        <a href="">Forgot your password ?</a>
    </span>
</div>

但正如您显然可以看出的那样，这与渲染方式不同。 比如我想收回输入的宽度。

对于其余部分，我在 urls.py
re_path(r'^login/$', auth_views.login, {'template_name': 'main /login.html'}, name='login'),

我的 settings.py 中的这个被重定向到正确的页面：
LOGIN_REDIRECT_URL = 'my_pls'

我用谷歌搜索了很多，最后使用了这个链接（以防你发现我不明白的东西）：https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html#understanding-the-rendering-process

Answer 1

您应该在 **forms.py** 上使用自定义 HTML 属性。

很简单：

from django import forms

class your_form(forms.Form):
    attrs_for_the_field = {
        'class': 'form-control',
        'placeholder': 'Write here!',
    }

    field = forms.CharField(widget=forms.CharField(attrs=attrs_for_the_field))

使用此代码，您将呈现以下 HTML：

<input type="text" name="field" class="form-control"  placeholder="Write here!" id="id_field">

查看https://docs.djangoproject.com/en/2.0/ref/forms/widgets/ 以了解 Django 如何表示 HTML 输入元素。

您还应该阅读https://docs.djangoproject.com/en/2.0/ref/forms/fields/，以便了解它的工作原理。

Answer 2

您可以在 forms.py 中为表单代码中的字段添加所有 HTML 配置。表格可以仅用 {{ form.as_p}} 显示。 可以使用 jQuery 或 JavaScript 检索输入的宽度。