Django Forms et Bootstrap - Classes CSS et <divs>

Question

J'utilise Twitter Bootstrap avec Django pour rendre les formulaires.

Bootstrap peut mettre en forme vos formulaires de manière tout à fait satisfaisante, pour autant que vous disposiez de l'adresse de l'entreprise. CSS les classes qu'il s'attend à voir incluses.

Cependant, mon problème est que les formulaires générés par le module de Django {{ form.as_p }} n'ont pas un bon rendu avec Bootstrap, car ils ne disposent pas de ces classes.

Par exemple, la sortie de Django :

    <form class="horizontal-form" action="/contact/" method="post">
        <div style='display:none'>
            <input type='hidden' name='csrfmiddlewaretoken' 
                   value='26c39ab41e38cf6061367750ea8c2ea8'/>
        </div>
        <p><label for="id_name">Name:</label> <input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /></p>
        <p><label for="id_directory">Directory:</label> <input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /></p>
       <p><label for="id_comment">Comment:</label> <textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p>
       <p>
           <label for="id_server">Server:</label>
           <select name="server" id="id_server">
               <option value="">---------</option>
               <option value="1" 
                   selected="selected">sydeqexcd01.au.db.com</option>
               <option value="2">server1</option>
               <option value="3">server2</option>
               <option value="4">server3</option>
           </select>
       </p>
       <input type="submit" value="Submit" />
    </form>

D'après ce que je peux dire, Bootstrap exige que vos formulaires aient un fichier <fieldset class="control-group"> chaque <label> tiene class="control-label" et chaque <input> est enveloppé dans un <div> :

<fieldset class="control-group">
    <label class="control-label" for="input01">Text input</label>
    <div class="controls">
        <input type="text" class="xlarge" name="input01">
        <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
    </div>
</fieldset>

Cependant, l'ajout d'étiquettes CSS personnalisées à chaque champ de formulaire dans Django est plutôt pénible :

Ajouter une classe à la sortie label_tag() de Django

Existe-t-il une manière plus intelligente d'utiliser soit {{ form.as_p }} ou d'itérer à travers les champs, sans avoir à spécifier manuellement des choses, ou à faire tout un tas de piratages ?

A la vôtre, Victor

Answer 1

C'est ce que j'ai trouvé :

<form class="form-horizontal" method="post">{% csrf_token %}
    <fieldset>
        <legend>{{ title }}</legend>
        {% for field in form %}
            {% if field.errors %}
                <div class="control-group error">
                    <label class="control-label">{{ field.label }}</label> 
                    <div class="controls">{{ field }}
                        <span class="help-inline">
                            {% for error in  field.errors %}{{ error }}{% endfor %}
                        </span>
                    </div>
                </div>
            {% else %}
                <div class="control-group">
                    <label class="control-label">{{ field.label }}</label> 
                    <div class="controls">{{ field }}
                        {% if field.help_text %}
                            <p class="help-inline"><small>{{ field.help_text }}</small></p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </fieldset>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary" >Submit</button>
    </div>
</form>

Answer 2

J'aime utiliser "django-crispy-forms" qui est le successeur de django-uni-form. Il s'agit d'une petite API géniale qui supporte parfaitement Bootstrap.

J'ai tendance à utiliser les filtres de modèles pour le portage rapide de l'ancien code et des formulaires rapides, et les balises de modèles lorsque j'ai besoin de plus de contrôle sur le rendu.

Answer 3

Vous pouvez consulter django-bootstrap-form et/ou django-bootstrap

Faites-nous savoir lequel vous utilisez et pourquoi !

Answer 4

Vous pourriez faire quelque chose comme ça :

{% for field in form %}
<fieldset class="control-group">
    <label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
    <div class="controls">
        {{ field }}
        <p class="help-text">{{ field.help_text }} </p>
    </div>
</fieldset>
{% endfor %}

Answer 5

Je recommande vivement https://github.com/dyve/django-bootstrap-toolkit