有什么方法可以将引导样式添加到 Django 密码输入字段？答案

【问题标题】：Is there any method to add bootstrap style to Django password input field?有什么方法可以将引导样式添加到 Django 密码输入字段？
【发布时间】：2020-08-08 09:11:20
【问题描述】：

我正在尝试向我的 Django 项目添加一个注册页面，并且我已经在 forms.py 文件中制作了注册表。

 
class createUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

        widgets = {
            'username' : forms.TextInput(attrs={'class':'form-control form-input','placeholder':'Username...'}),
            'email' : forms.EmailInput(attrs={'class':'form-control form-input','placeholder':'Email...'}),
            'password1' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Password'}),
            'password2' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Re-type password'}),

        }

HTML

<h4>Sign in</h4>
                <div class="form-container">
                    <form method="POST" action="">
                <div class="form-render" style="display: block;">
                   {% csrf_token %}
                    <div style="margin-bottom: 1rem;">
                    {{form.username}}
                </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.email}}
                    </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.password1}}
                    </div>
                    <div style="margin-bottom: 1rem;">
                    {{form.password2}}
                    </div>
                        <button type="submit"  class="btn btn-primary" style="border-radius: 0px; outline-color: #167896; background-color:#167896; width: 15rem; margin-left: 1.5rem;">Submit</button>
                    </div>
                    </form>
                    <div style="display: flex; margin-left: 1.75rem; margin-top: 1rem; margin-bottom: 0rem;">
                        <p>Already have an account?</p><a style="text-decoration: none; " class="forgot" href="{% url 'login' %}">&nbsp Log in</a> 
                      </div>

                </div>

渲染出 HTML 后，引导样式不会添加到密码输入字段中。这是我的输出页面的screenshot。

【问题讨论】：

标签： html css django

【解决方案1】：

您不必将引导类发送为attrs。只需使用Crispy Forms

pip install django-crispy-forms

settings.py

INSTALLED_APPS = [
    ...
    "crispy_forms",
]

CRISPY_TEMPLATE_PACK = "bootstrap4"

HTML：

{% load crispy_forms_tags %}

<form method="post">
    {{ my_formset|crispy }}
</form>

【讨论】：

【解决方案2】：

但是该类是否出现在源代码中？如果显示，则说明您的引导文件未加载，或者您使用了错误的测量值

无论如何你都可以做一个测试，创建这样的东西：

<style>.form-a{width:100%:!important; height:36px; border:green;}</style>

把上面的代码放在你的页面上！现在将 form-a 类放在你的<input> 中，看看它是否以绿色边框呈现并占用所有可用空间，否则意味着这些类不在呈现的源代码（客户端）中，因此，您的非引导相关代码还有另一个问题。如果像我说的那样，您的引导文件没有加载，或者您使用了错误的类来执行您打算执行的操作。

【讨论】：

class createUserForm(UserCreationForm): def __init__(self, *args, **kwargs): super(createUserForm, self).__init__(*args, **kwargs) self.fields['password1'].widget = forms.PasswordInput(attrs = {'class': 'form-control',}) self.fields['password2'].widget = forms.PasswordInput(attrs = {'class': 'form-control',}) class Meta: model = User fields = ['username', 'email', 'password1', 'password2'] widgets = { } 像这样修改表单时，结果如我所愿

【解决方案3】：

有几种方法可以给这只猫剥皮，但我首选的方法是使用django-bootstrap4 包：https://pypi.org/project/django-bootstrap4/

安装在你的venv:pip install django-bootstrap4
将其添加到您的INSTALLED_APPS：

INSTALLED_APPS = (
    # ...
    "bootstrap4",
    # ...
)

在模板中使用它：

{% load bootstrap4 %}

<h4>Sign in</h4>
<div class="form-container">
    <form method="POST" action="">
    {% csrf_token %}
    {% bootstrap_form form %}
    <button type="submit" class="btn btn-primary">Submit</button>
</div>

它会自动处理正确显示错误。如果您需要对字段执行任何自定义操作，您还可以遍历字段：

{% load bootstrap4 %}

<h4>Sign in</h4>
<div class="form-container">
    <form method="POST" action="">
    {% csrf_token %}
    {% for field in form %}
        {% bootstrap_field field %}
    {% endfor %}
    <button type="submit" class="btn btn-primary">Submit</button>
</div>

祝你好运！

【讨论】：