自定义 "authentication_form" 不适用 bootstrap CSS

Question

我正在尝试将 bootstrap 应用于 Django 登录表单。我搜索了 google 几个小时，几乎每个人都在说同样的事情，即在 urls.py 中设置自定义 authentication_form，覆盖自定义登录表单中的用户名和密码字段并通过class 通过小部件的 attrs 参数。我已经这样做了，但 django 仍然没有将表单控件 class 应用到我的输入字段。我不太确定出了什么问题。表单仍然呈现，但没有应用 bootstrap 样式。

urls.py

from django.conf.urls import url
from django.contrib.auth.views import LoginView, LogoutView, 
    PasswordChangeView, PasswordChangeDoneView, \
    PasswordResetView, PasswordResetDoneView, 
    PasswordResetConfirmView, PasswordResetCompleteView

from account.forms import LoginForm
from account.views import dashboard

urlpatterns = [
    url(r'^$', dashboard, name='dashboard'),
    url(r'^login/$', LoginView.as_view(), {'authentication_form': 
        LoginForm}, name='login'),
    url(r'^logout/$', LogoutView.as_view(), name='logout'),
    url(r'^password-change/$', PasswordChangeView.as_view(), 
        name='password_change'),
    url(r'^password-change/done/$', PasswordChangeDoneView.as_view(), 
        name='password_change_done'),
    url(r'^password-reset/$', PasswordResetView.as_view(), 
        name='password_reset'),
    url(r'^password-reset/done/$', PasswordResetDoneView.as_view(), 
        name='password_reset_done'),
    url(r'^password-reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-
        Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
        PasswordResetConfirmView.as_view(), 
        name='password_reset_confirm'),
    url(r'^password-reset/complete/$', 
        PasswordResetCompleteView.as_view(), 
        name='password_reset_complete')
]

forms.py

from django.contrib.auth.forms import AuthenticationForm
from django.forms import CharField, TextInput, PasswordInput


class LoginForm(AuthenticationForm):
    username = CharField(widget=TextInput(attrs={'class': 'form-
    control'}))
password = CharField(widget=PasswordInput(attrs={'class': 'form-
    control'}))

views.py

@login_required(
    redirect_field_name=reverse_lazy('login'),
    login_url=reverse_lazy('login'))
def dashboard(request):
    return render(request, 'account/dashboard.html', {'section': 
        'dashboard'})

login form

Answer 1

在我的模板中，我使用 Widget Tweaks

<form method='POST' action="/" enctype='multipart/form-data'>
 {% load widget_tweaks %}
 {% csrf_token %}
 {{ form.first_name |add_class:"customCSS1 customCSS2" }}
 {{ form.second_name |add_class:"form-control customCSS4" }}
</form>
{{ form.media.js }}

使用此插件，您可以根据需要设置表单样式。您可以添加您的 form-control class 或使用个人 CSS class like

.customCSS1{
  width60%;
  border-radius:5px;
 }

自定义 "authentication_form" 不适用 bootstrap CSS

Custom "authentication_form" does not apply bootstrap CSS

python

forms

django

twitter-bootstrap

django-1.11