【问题标题】:Custom "authentication_form" does not apply bootstrap CSS自定义“authentication_form”不应用引导 CSS
【发布时间】:2017-12-14 21:09:43
【问题描述】:

我正在尝试将引导程序应用于 django 登录表单。我已经搜索了谷歌几个小时,几乎每个人都在说同样的事情,那就是在urls.py 中设置自定义authentication_form,覆盖自定义登录表单中的用户名和密码字段,并通过小部件的attrs 传递类范围。我已经这样做了,但 django 仍然没有将表单控件类应用于我的输入字段。我不太确定出了什么问题。表单仍然呈现,但没有应用引导样式。

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

【问题讨论】:

  • views.py 中的表单验证在哪里?您需要检查表单是否有效,然后保存数据。
  • @hasTheFranz 我曾经有过它,但在尝试修复样式问题时将其取出
  • 是的,把它放回去。没有它,你的表单将永远无法工作。表单甚至显示在模板中吗?你在模板中使用{{form}}
  • @hansTheFranz 我弄错了。我走的一条路线是在views.py中定义一个扩展django.views.generic.FormView的自定义视图。自定义视图已覆盖 form_valid。我看到的大多数 LoginForm 示例都没有实现 is_valid。我不明白这将如何导致样式类被添加到呈现的表单中。
  • @hansTheFranz 我更新了标题以更好地反映主题。这是我的第一个问题 :) 所以这是我暑期 Internet 编程课程的最后一个项目,我想消除使用 django 之外的依赖项(通过 CDN 访问的引导程序除外),这样我的项目几乎是独立的。

标签: python django forms twitter-bootstrap django-1.11


【解决方案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 类或使用个人 CSS 类,如

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多