Django Crispy Forms i Bootstrap Awesome Checkbox - django, checkbox, django-crispy-forms

Czy jest jakikolwiek sposób, aby formularze Django Crispy emitowały układ pola wyboru w nieco inny sposób, aby pomieścić Bootstrap Awesome Checkbox (https://github.com/flatlogic/awesome-bootstrap-checkbox)?

UWAGA: nie można tego zrobić poprzez zmianę CSS. Tag INPUT nie jest już dzieckiem tagu LABEL z niesamowitym checkboxem ... jest rodzeństwem na tym samym poziomie, co tag LABEL. Crispy Forms renderuje się w następujący sposób:

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

ale awesome-checkbox musi renderować w ten sposób:

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

Odpowiedzi:

Istnieje wiele sposobów wdrożenia tego:

1. Możesz po prostu dodać css do swojego pola modelu (jak tutaj https://stackoverflow.com/a/18029091/3033586 )
2. css_class kwarg (patrz tutaj http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html?highlight=css_class )

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

3. Zawsze możesz też przesłonić szablony. Stwórz własny szablon dla field.html.

Field ("twoje_boolean_field", template = "some_path / boolean_field.html"),

gdzie "boolean_field.html" jest twoją wersją

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

Na przykład moja 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" %}