带有 Bootstrap 的 django modelform

Question

我想使用 Bootstrap 格式化我的模型表单，并且没有任何额外的包(仅使用 Bootstrap 源文件)。我要配置的特定表单:

class FoodForm(forms.ModelForm):

    class Meta:
        model = Food
        fields = ['name', 'company']
        exclude = ('user', 'edit')

“名称”是一个文本字段，我想成为一个 Bootstrap 文本字段，“公司”是一个选择字段(来自外键)，我想成为一个 Bootstrap 下拉列表。

表单模板的当前设置:

    {% extends "mainsite/base.html" %}

    {% block content %}

    <form method="POST" class="post-form">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Save</button>
</form>
    </form> 

    {% endblock %}

将任何 django modelform 字段格式化为 Bootstrap 的最佳实践是什么？

Answer 1

Bootstrap 字段的技巧是注入(inject) form-control类到每个字段中，并确保每个字段都位于 form-group 中dom 元素。要将该类注入(inject)您的每个字段，您可以这样做:

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

现在，在您的 django 模板中，您可以遍历表单字段，将每个字段放入 bootstrap 的 form-group .例如:

<form method="POST" class="post-form">
    {% for field in form %}
    <div class="form-group">
        {{ field }}
    </div>
    {% endfor %}
</form>

我还要说这种设置(Django + Bootstrap)现在非常普遍，所以谷歌搜索“使用 django 的 Bootstrap 表单”应该会产生更多关于进一步定制的知识。祝你好运!