python之将自定义 CSS 样式添加到模型表单 django

我正在使用引导变体来帮助设置模型表单的样式。有一个特定的类，我希望其中一个字段是，我已经阅读了有关该主题的内容，普遍的共识是向 ModelForm 的元添加一个小部件，就像我在下面尝试的那样:

表单.py

class EmailForm(forms.ModelForm): 
    class Meta: 
        model = MarketingEmails 
        fields = ['messageid','subject','body','name','altsubject','utm_source','utm_content','utm_campaign',] 
        widgets = { 
            'body': Textarea(attrs={'class': 'summernote'}), 
        } 

但是这似乎并没有呈现在我的模板上，它是:

<div class="row"> 
<div class="col-sm-6"> 
    <form method="POST" class="post-form" action =""> 
    {% csrf_token %}         
        <p><label for="id_subject">Subject</label> 
        <input class="form-control" id="id_subject" type="text" name="subject" maxlength="1000" value="{{rows.subject}}"required /></p> 
 
        <p><label for="id_name">Name</label> 
        <input class="form-control" id="id_name" type="text" name="name" maxlength="1000" value="{{rows.name}}"required /></p> 
 
        <p><label for="id_body">Body</label> 
        <input class="form-control" id="id_body" type="text" name="body" maxlength="1000" value="{{rows.body}}"required /></p> 
 
        <p><label for="id_altsubject">Alt Subject</label> 
        <input class="form-control" id="id_altsubject" type="text" name="altsubject" maxlength="1000" value="{{rows.altsubject}}"required /></p> 
 
        <p><label for="id_utm_source">utm_source</label> 
        <input class="form-control" id="id_utm_source" type="text" name="utm_source" maxlength="1000" value="{{rows.utm_source}}"required /></p> 
 
        <p><label for="id_utm_content">utm_content</label> 
        <input class="form-control" id="id_utm_content" type="text" name="utm_content" maxlength="1000" value="{{rows.utm_content}}"required /></p> 
 
        <p><label for="id_utm_campaign">utm_campaign</label> 
        <input class="form-control" id="id_utm_campaign" type="text" name="utm_campaign" maxlength="1000" value="{{rows.utm_campaign}}"required /></p> 
 
        <button type="submit" class="save btn btn-default">Save</button> 
 
    </form> 
</div> 

有没有其他方法可以做到这一点，或者我的代码有什么地方做错了吗？

更新 我遵循了 Jacek 的建议，现在它被设计了样式但是信息不再显示，这是我的新代码:

表单.py:

class EmailForm(forms.ModelForm): 
subject = forms.CharField( 
    label = 'Subject', 
    max_length = 2000, 
    required = True, 
    widget = forms.TextInput( 
        attrs = {'class': 'summernote', 'name': 'subject'} 
        ) 
    ) 
 
...  
class Meta: 
    model = MarketingEmails 
    fields = ['messageid','subject','body','name','altsubject','utm_source','utm_content','utm_campaign',] 

views.py:

def emailinfo(request, pk): 
if request.session.has_key('shortname'): 
    shortname =  request.session['shortname'] 
    form = MarketingEmails.objects.filter(messageid =pk).get() 
    if request.method == 'GET': 
        form = EmailForm(instance=form) 
        return render(request, 'marketingemails/emailinfo.html',{'shortname': shortname, 'form': form}) 
 
    else: 
        form = EmailForm(request.POST,instance=form) 
        if form.is_valid(): 
            return redirect('marketingemails:emailinfo', pk = form.messageid) 
 
    return render(request, 'marketingemails/emailinfo.html',{'shortname': shortname, 'form': form}) 
else: 
    return HttpResponseRedirect(reverse('common:login'))     

html:

<div class="row"> 
<div class="col-sm-6"> 
    <form method="POST" action =""> 
    {% csrf_token %}         
    {% for field in form %} 
        {{ field.label_tag }} 
        {{ field }} 
 
        {% if field.help_text %} 
            {{ field.help_text }} 
        {% endif %} 
 
        {% for error in field.errors %} 
            {{ error }} 
        {% endfor %} 
 
    {% endfor %} 
    <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
</div> 

请您参考如下方法:

在我的模板中，我使用 Widget Tweaks您可以添加 CSS 类或 twitter-bootstrap 类。非常有用

<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; 
 }