Question

我正在以下列方式呈现我的Django表单：

<form action="/student/" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Launch" class="btn btn-primary"/>
</form>

我有多个不同类型的字段，每个字段都应用了不同的内容，例如验证器和帮助文本。

我有两个字段，我想添加bootstrap spans。我希望将一个英镑符号添加到一个货币字段，以及一个我希望附加一个百分比符号的字段，我知道可以使用bootstrap执行如下操作：

This input field.

<div class="input-group">
  <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="Price"/>
</div>

但是在我的django模板中执行此操作需要我将表单分解为特定字段并创建特定于字段的html。例如This question建议的解决方案。

我正在寻找的是一种在模型中指定的方法，或者只应用于特定字段的模型，属性或类，但是会在不破坏表单的情况下将其呈现为上面。

谢谢。

的信息：引导-4 Django的2.0.2 Python的3.6.1

Answer 1

您需要从Base Widget继承。如果您使用下面的模板，则可以轻松创建自定义引导程序组。

forms.py

from django import forms
from django.forms import Widget
from django.utils.safestring import mark_safe

class PrependWidget(Widget):
    """ Widget that prepend boostrap-style span with data to specified base widget """

    def __init__(self, base_widget, data, *args, **kwargs):
        u"""Initialise widget and get base instance"""
        super(PrependWidget, self).__init__(*args, **kwargs)
        self.base_widget = base_widget(*args, **kwargs)
        self.data = data

    def render(self, name, value, attrs=None):
        u"""Render base widget and add bootstrap spans"""
        field = self.base_widget.render(name, value, attrs)
        return mark_safe((
            u'<div class="input-group mb-3">'
            u'  <div class="input-group-prepend">'
            u'    <span class="input-group-text" id="basic-addon1">%(data)s</span>'
            u'  </div>'
            u'  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">'
            u'</div>'
        ) % {'field': field, 'data': self.data})

class MyForm(forms.Form):
    example_field = forms.CharField(max_length=255, min_length=1, label='', required=False,
                              widget=PrependWidget(base_widget=forms.TextInput, data='$'))

Source

Answer 2

以您可以做的形式：

from django.forms import TextInput, Textarea

class MyForm(modelForm):
    class Meta:
        widgets = {
            "name": TextInput({"class": "form-control"}),
            "comment": Textarea({"data-validation": "validate"}),
        }

您可以在此链接中阅读有关小部件的信息并了解添加自定义属性的不同方法，这是关于小部件的django文档：https://docs.djangoproject.com/en/2.0/ref/forms/widgets/

模型表单上的Django Bootstrap input-group-addon，不分隔字段

2 个答案: