带有引导程序的 django modelform

Posted 2023-02-24

【中文标题】带有引导程序的 django modelform

【英文标题】：django modelform with bootstrap

【发布时间】：2015-10-16 02:43:18

【问题描述】：

我想用 bootstrap 格式化我的模型表单，而不需要任何额外的包（只使用 bootstrap 源文件）。我要配置的特定表单：

class FoodForm(forms.ModelForm):

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

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

表单模板的当前设置：

    % 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 字段格式化为引导程序的最佳做法是什么？

【问题讨论】：

How to add class, id, placeholder attributes to a field in django model forms的可能重复

为什么不用crispy-forms？我知道你提到过你想使用香草引导程序，但这似乎没有必要，因为脆的形式很轻。

【参考方案1】：

只需使用Django Crispy Forms 这相当简单直接

【参考方案2】：

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

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 模板中，您可以遍历您的表单字段，将每个字段放入引导程序的 form-group。例如：

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

我还要说这种设置（Django + Bootstrap）现在非常普遍，因此谷歌搜索“使用 django 的引导表单”应该会产生更多关于进一步自定义的知识。祝你好运！