Django Crispy Forms 和 Bootstrap Awesome Checkbox

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 添加到您的模型字段（如此处）
css_class kwarg（看这里http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html?highlight=css_class）

Field('your_boolean_field', css_class='checkbox-primary'),

您也可以随时覆盖模板。为 field.html.

Field('your_boolean_field', template='some_path/boolean_field.html'),

其中 'boolean_field.html' 是您的

版本

python2.7/site-packages/crispy_forms/templates/bootstrap3/field.html

比如我的约会对象_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

Django Crispy Forms and Bootstrap Awesome Checkbox

django

checkbox

django-crispy-forms