将Bootstrap或Sylilng添加到内置表单的Django中

Question

我刚刚用django启动了我的第一个应用程序。 我以前使用引导程序和自定义样式构建了表单。 现在，我开始了解带有模型的Django内置表单。 我已经为此编写了代码，但是发现没有样式，而且看起来很丑。 我想将自定义样式添加到此表单中，我该怎么做。 这是我的代码。

model.py

class Message(models.Model):
    MessageID = models.AutoField(verbose_name='Message ID',primary_key=True)
    MessageSubject = models.CharField(verbose_name='Subject',max_length=255,null=True,blank=True)
    MessageContent = models.TextField(verbose_name='Content',null=True,blank=True)
    MessageType = models.CharField(verbose_name='Message Type',max_length=255,default='Email',null=True,blank=True)

forms.py

from django import forms
from django.forms import ModelForm
from Apps.SendMessage.models import Message

class Message_form(ModelForm):
    class Meta:
        model = Message

views.py

def add_message(request):
    message_form = {'message_form': Message_form}
    print request.POST.get('Subject')
    return render_to_response('sendmessage_form.html', message_form,  context_instance=RequestContext(request))

和sendmessage_form.html

{% extends "base.html" %}

{% block Content %}

<div class="container">
  <!-- Contacts -->
  <div id="contacts">
    <div class="row">
      <!-- Alignment -->
      <div class="col-sm-offset-3 col-sm-4">
        <!-- Form itself -->
        <form name="sentMessage" action="" method="POST" class="well" id="contactForm"  novalidate>
          {% csrf_token %}
          {{ message_form }}

          <button type="submit" class="btn btn-primary btn-sm pull-right">Send</button><br />
        </form>
      </div>
    </div>
  </div>
</div>



{% endblock %}

Answer 1

您在寻找小工具！

从文档中 ：

from django import forms

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField(widget=forms.Textarea)

在您的示例中：

您正在使用Bootstrap，因此每个字段中都有一个简单的CSS类（窗体控件）会使它看起来很棒：

class Message_form(ModelForm):
    class Meta:
        model = Message
        fields = ['MessageSubject', 'MessageContent', 'MessageType']
        widgets = {'MessageSubject': forms.TextInput(attrs={'class': 'form-control'}),
                   'MessageContent': forms.Textarea(attrs={'class': 'form-control'}),
                   'MessageType': forms.TextInput(attrs={'class': 'form-control'}),}

另一件事，您不需要显式定义MessageID。 所有Django模型都有一个主键，如您定义的主键（请检查docs ）。

Answer 2

使用Django Bootstrap3应用。 它提供了用于显示水平和垂直引导表格的表单字段和模板标签：

{% load bootstrap3 %}

<form action="." method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 3

我一直在使用crisply_forms，它与bootstrap一起工作得很好。

pip install django-crispy-forms

在您的模板中：

{% load crispy_forms_tags %}
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
</form>

Answer 4

在模板中：

{{ form|as_p}}

在forms.py中：

select = forms.CharField(widget=forms.Select(choices=select_choices, attrs={'class ':'form-control'}))

name = forms.CharField(widget=forms.TextInput(attrs={'class ':'form-control'}))