Question

有没有办法让Django Crispy-forms以略微不同的方式发出复选框的布局以容纳Bootstrap Awesome Checkbox（https://github.com/flatlogic/awesome-bootstrap-checkbox）？

注意：这不能通过CSS更改完成。 INPUT标签不再是带有awesome-checkbox的LABEL标签的子标签......它是与LABEL标签处于同一级别的兄弟。 Crispy Forms渲染如下：

<div class="checkbox">
  <label>
    <input type="checkbox"> Check me out
  </label>
</div>

但是awesome-checkbox需要像这样呈现：

<div class="checkbox">
   <input type="checkbox" id="checkbox1">
   <label for="checkbox1">
       Check me out
   </label>
</div>

Answer 1

有很多方法可以实现这个目标：

您只需将css添加到模型字段（例如此处https://stackoverflow.com/a/18029091/3033586）
css_class kwarg（看这里http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html?highlight=css_class）

字段（'your_boolean_field'，css_class ='checkbox-primary'），

您也可以随时覆盖模板。为field.html创建自己的模板。

字段（ 'your_boolean_field'，模板= 'SOME_PATH / boolean_field.html'），

其中'boolean_field.html'是您的

python2.7 /站点包/ crispy_forms /模板/ bootstrap3 / field.html

例如我的date_field.html

{% load crispy_forms_field %}


<div id="div_{{ field.auto_id }}" class="form-group{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{% if field.label and form_show_labels %}
    <label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
        {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
    </label>
{% endif %}

<div class="controls {{ field_class }} input-group date">
    {% crispy_field field %}
    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
{% include 'bootstrap3/layout/help_text_and_errors.html' %}

Django Crispy Forms和Bootstrap Awesome Checkbox

1 个答案: