如何在DJango中使用Bootstrap设置用户注册表单的样式？_Django

如何在DJango中使用Bootstrap设置用户注册表单的样式？

django

如何在DJango中使用Bootstrap设置用户注册表单的样式？,django,Django,因此，我有下面的用户注册表格，我想样式。我的forms.py看起来像这样： from django.contrib.auth.models import User from django import forms class UserForm(forms.ModelForm): password = forms.CharField(widget=forms.PasswordInput()) class Meta: model = User fi

因此，我有下面的用户注册表格，我想样式。我的forms.py看起来像这样：

from django.contrib.auth.models import User
from django import forms

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())

    class Meta:
        model = User
        fields = ['username','email','password']

现在这是my views.py：

class UserFormView(View):
    form_class =UserForm
    template_name = 'visit/registration/register.html'

    def get(self,request):
        form = self.form_class(None)
        return render(request,self.template_name,{'form':form})

    def post(self, request):
        form = self.form_class(request.POST)

        if form.is_valid():

            user =form.save(commit=False)

            username = form.cleaned_data['username']
            password = form.cleaned_data['password']
            user.set_password(password)
            user.save()

            user = authenticate(username=username, password=password)

            if user is not None:

                if user.is_active:
                    login(request,user)
                    return redirect('visit:index')


        return render(request, 'visit/registration/register.html', {'form': form})

现在我对HTML有点困惑，因为只有一行代码将页面中的所有字段一起传递。那么我该如何分别设置这些字段的样式呢

{% extends 'visit/base.html'%}

{%block content%}
<!DOCTYPE html>
<html>
{% load staticfiles %}
<link rel = "stylesheet" type = "text/css" href = "{% static "visit/registration.css"%}">
<head>
    <title></title>
</head>

<body>
    <form method="POST" class = "sign-up-form">
        {% csrf_token %} {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>
</body>

</html>
{%endblock%}

您有多个选项，每个选项都有其优缺点：

一,。在forms.py中添加自定义css类

要使用{form.as_p}方法的简单性，您可以手动向所有表单字段添加类，例如：

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={'class' : 'your-custom-class'})
    )

请注意，要使表单与引导的样式完全一致，这可能是一个挑战

二,。手动呈现表单

您可以在模板中手工填写表格，例如：

<div class="form-group">
  <label for="{{ form.password.id_for_label }}">
    {% trans 'Password' %}
  </label>
  <input type="text" id="{{ form.password.id_for_label }}"
         name="{{ form.password.html_name }}"
         {% if form.password.field.required %}required{% endif %}
         class="form-control{% if form.password.errors %} is-invalid{% endif %}"
         value="{% if form.password.value %}{{ form.password.value }}{% endif %}">
  {% if form.password.help_text %}
    <small class="text-muted">
      {{ form.password.help_text }}
    </small>
  {% endif %}
  {% for err in form.password.errors %}
    <span class="invalid-feedback">{{ err }}</span>
  {% endfor %}
</div>

可以找到有关手动呈现表单字段的详细信息

上面的代码片段将使用默认django中存在的大部分功能，但另一方面，它迫使您编写大量样板代码，这些代码很难长期维护

三,。将第三方应用程序作为前两个选项的混合使用

您可以使用自定义应用程序处理表单的呈现，一个很好的例子是。

您只需使用这将自动为您呈现引导表单

{% extends 'visit/base.html'%}
{% load bootstrap3 %}

{%block content%}
<!DOCTYPE html>
<html>
{% load staticfiles %}
<link rel = "stylesheet" type = "text/css" href = "{% static "visit/registration.css"%}">
<head>
    <title></title>
</head>

<body>
    <form method="POST" class = "sign-up-form">

        {% csrf_token %} 
        {% bootstrap_form form %}

        <button type="submit">Submit</button>
    </form>
</body>

</html>
{%endblock%}

Django文档的链接现在无效。