将 bootstrap 样式应用于 Django 表单

Question

我想使用 bootstrap 来获得一个像样的网站设计，不幸的是我不知道如何设计表单字段的样式。我在说这个：

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  {{ form.title.label }}
  {{ form.title }}
</form>

这个应该怎么设计？？我试过这个：

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  <div class="form-control">
    {{ form.title.label }}
    {{ form.title }}
  </div>
</form>

这显然没有给我想要的结果。

如何将 bootstrap 样式应用于 Django 表单？

Answer 1

如果您不想使用第 3 方工具，那么基本上您需要向 classes 添加属性，我更喜欢通过让我的模型形式继承的基础 class 来做到这一点

class BootstrapModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(BootstrapModelForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

可以轻松调整...但是正如您所见，我所有的字段小部件都应用了表单控件css class

如果您愿意，您可以针对特定字段扩展它，这是一个应用了属性的继承表单示例

class MyForm(BootstrapModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'placeholder': 'Enter a name'})

将 bootstrap 样式应用于 Django 表单

Applying bootstrap styles to django forms

django

django-templates

django-forms