将引导样式应用于 django 表单

Posted 2023-02-24

【中文标题】将引导样式应用于 django 表单

【英文标题】：Applying bootstrap styles to django forms

【发布时间】：2016-01-04 08:43:06

【问题描述】：

我想使用 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>

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

如何？

【问题讨论】：

django-bootstrap3 将真正让您的生活更轻松。 github.com/dyve/django-bootstrap3

@Quaker 我会检查一下，谢谢！

【参考方案1】：

如果您不想使用 3rd 方工具，那么本质上您需要为您的类添加属性，我更喜欢通过拥有一个我的模型表单继承自的基类来做到这一点

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 MyForm(BootstrapModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update('placeholder': 'Enter a name')

【讨论】：

这真的很酷！我不喜欢使用 3 方工具，但更坚持框架！很喜欢，谢谢

@FooBar - 不用担心，尽情享受吧！ :)

这个类会进入我的 forms.py 文件吗？菜鸟问题，我知道。我刚开始学习 django，所以我不是 100% 确定...

@Jeannie 是的，你可以把它放在任何真正有意义的地方。您可以根据需要在整个项目中导入它