如何使用 Bootstrap 在 Django 中自定义复选框和单选框? [英] How to custom checkbox and radio in Django using Bootstrap?

问题描述

我正在尝试使用引导程序类自定义 Django 中的复选框和收音机.然而，它没有奏效.

我已经尝试使用 widgets 和 attrs 在 forms.py 中插入引导程序类:custom-control custom-radio custom-control-inline custom-control-input custom-control-label

我的代码:

models.py

Y = 1N = 2YN = ((Y, '是'),(N, '不'),)类道具(模型.模型):yesorno = models.IntegerField(choices=YN, default=Y,verbose_name='Label...')

forms.py

class PropForm(forms.ModelForm):元类:模型 = 道具排除 = ()小部件={'yesorno': forms.RadioSelect(属性={'class':'自定义控件输入自定义控件标签',}),}

模板.html

{% csrf_token %}<div class="custom-control custom-radio custom-control-inline">{{ form.yesorno.label_tag }} {{ form.yesorno }}

</表单>

HTML 渲染

<label for="id_yesorno_0">标签...?</label><ul id="id_yesorno" class="custom-control-input custom-control-label"><li><label for="id_yesorno_0"><input type="radio" name="yesorno" value="1" class="custom-control-input custom-control-label" required="" id="id_yesorno_0">是</label><li><label for="id_yesorno_1"><input type="radio" name="yesorno" value="2" class="custom-control-input custom-control-label" required="" id="id_yesorno_1已检查=">no</label>

我想使用自定义引导程序样式(

解决方案

迄今为止我最好的解决方案.我不得不手动渲染.

template.html

<div class="form-group">{{ form.field_name.label_tag }}{% 为 pk，在 form.field_name.field.widget.choices 中选择 %}<div class="custom-control custom-radio custom-control-inline"><input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"{% ifequal form.field_name.data pk.0 %}检查=检查"{% endifequal %}/><label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>

{% 结束为 %}

<!-- 复选框--><div class="form-group">{{ form.field_name.label_tag }}{% 为 pk，在 form.field_name.field.widget.choices 中选择 %}<div class="custom-control custom-checkbox custom-control-inline"><input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"{% ifequal form.field_name.data pk.0 %}检查=检查"{% endifequal %}/><label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>

{% 结束为 %}