如何使用 Bootstrap 在 Django 中自定义复选框和收音机？

Posted 2023-02-24

【中文标题】如何使用 Bootstrap 在 Django 中自定义复选框和收音机？

【英文标题】：How to custom checkbox and radio in Django using Bootstrap?

【发布时间】：2019-08-24 09:02:17

【问题描述】：

我正在尝试使用引导类自定义 Django 中的复选框和收音机。但是，它并没有奏效。

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

我的代码：

models.py

Y = 1
N = 2

YN = (
    (Y, 'yes'),
    (N, 'no'),)

class Prop(models.Model):
    yesorno = models.IntegerField(choices=YN, default=Y, verbose_name='Label...')

forms.py

class PropForm(forms.ModelForm):
    class Meta:
        model = Prop
        exclude = ()
        widgets=
            'yesorno': forms.Radioselect(
                attrs=
                    'class':'custom-control-input custom-control-label',
                
            ),
        

模板.html

<form action="" method="POST">
     % csrf_token %
     <div class="custom-control custom-radio custom-control-inline">
        form.yesorno.label_tag   form.yesorno 
     </div>
</form>

HTML 渲染

<div class="custom-control custom-radio custom-control-inline">
 <label for="id_yesorno_0">Label...?</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">yes</label>
   </li>
   <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" checked="">no</label>
   </li>
 </ul>
</div>

我想使用自定义引导样式 (https://getbootstrap.com/docs/4.3/components/forms/#radios)。

我需要像下面的代码一样呈现 HTML：

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

预期结果：

【问题讨论】：

并非所有这些类都适用于复选框。有些是针对复选框周围的 div

谢谢@CarlBrubaker。我根据您的评论更新了我的问题。但是，HTML 未正确呈现。

试试this

谢谢@CarlBrubaker。我通过手动渲染解决了我的问题，如下所述。

【参考方案1】：

到目前为止我最好的解决方案。 我不得不手动渲染。

template.html

<!-- radio -->
<div class="form-group">
     form.field_name.label_tag 
    % for pk, choice in 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 %
           checked="checked"
         % endifequal %/>
        <label for="id_form.field_name.name_ forloop.counter0 " class="custom-control-label"> choice </label>
    </div>
    % endfor %
</div>

<!-- checkbox -->
<div class="form-group">
     form.field_name.label_tag 
    % for pk, choice in 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 %
           checked="checked"
         % endifequal %/>
        <label for="id_form.field_name.name_ forloop.counter0 " class="custom-control-label"> choice </label>
    </div>
    % endfor %
</div>