Django Forms et Bootstrap – Classes CSS et

J’aime utiliser “django-crispy-forms” qui est le successeur de django-uni-form. C’est une petite API géniale et un excellent support pour Bootstrap.

J’ai tendance à utiliser les filtres de modèle pour porter rapidement l’ancien code et les formulaires rapides, ainsi que les balises de modèle lorsque j’ai besoin de davantage de contrôle sur le rendu.

C’est ce que j’ai imaginé:

 
{% csrf_token %} 
 
{{ title }}
 {% for field in form %} {% if field.errors %} 
 {{ field.label }} 
{{ field }}  {% for error in field.errors %}{{ error }}{% endfor %}  
 
 {% else %} 
 {{ field.label }} 
{{ field }} {% if field.help_text %} 
{{ field.help_text }}
 {% endif %} 
 
 {% endif %} {% endfor %} 
 
 Submit 
  

Lorsque django-crispy-forms ne peut pas être utilisé (par exemple lorsque le modèle traite individuellement chaque champ du formulaire), la réponse de jcmrgo est la seule solution. Sur la base de sa réponse, voici une solution pour Bootstrap 3 (en laissant sa version pour Boostrap 2), et avec l’ ajustement des classes de champs à l’intérieur du modèle . Bien que les classes de champs ne soient pas accessibles depuis le modèle avec la bibliothèque standard de Django (ce qui conduit à des formulaires supplémentaires ou à des balises de modèle dans d’autres solutions), voici une solution qui définit les bonnes classes aux balises de champ sans avoir à coder

 {% load i18n widget_tweaks %} 
 {% csrf_token %} {% for field in form %} {% if field.errors %} 
 {{ field.label }} 
 {{ field|attr:"class:form-control" }}  {% for error in field.errors %}{{ error }}{% endfor %}  
 
 {% else %} 
 {{ field.label }} 
 {{ field|attr:"class:form-control" }} {% if field.help_text %} 
{{ field.help_text }}
 {% endif %} 
 
 {% endif %} {% endfor %} 
 
 {% trans "Submit" %} 
 
  

Cela nécessite django-widget-tweaks installé et widget_tweaks ajouté à INSTALLED_APPS .

Vous pourriez faire quelque chose comme ça:

 {% for field in form %} 
 {{ field.label }} 
 {{ field }} 
{{ field.help_text }} 
 
 
 {% endfor %} 

Pour append des atsortingbuts CSS aux formulaires générés par Django, il suffit d’utiliser le code suivant dans vos formulaires.py:

 Recepient = forms.ChoiceField(label=u'Recepient', widget=forms.Select(attrs={'id':'combobox'})) 

Il produira le code HTML suivant:

 Recepient  

Je recommande définitivement https://github.com/dyve/django-bootstrap-toolkit

Par exemple, vous pouvez créer une classe qui définit les atsortingbuts comme vous le souhaitez et l’appeler en conséquence.

 class ContactForm(ModelForm): class Meta: model = Contact created = MyDatePicker() class Uniform(forms): def __init__(self, *args, **kwargs): attrs = kwargs.pop("attrs",{}) attrs["class"] = "span3" kwargs["attrs"] = attrs super(Uniform, self).__init__(*args, **kwargs) class MyDatePicker(Uniform,forms.DateInput) def __init__(self, *args, **kwargs): attrs = kwargs.pop("attrs",{}) attrs["class"] = "datepick" attrs["id"] =kwargs.get('datetag', '') kwargs["attrs"] = attrs super(MyDatePicker, self).__init__(*args, **kwargs) 

Le moyen le plus rapide et le plus simple serait de définir votre propre classe de base qui étend la classe de formulaires Django et de redéfinir sa méthode as_p pour obtenir le format as_p par Bootstrap. Modifiez ensuite vos formulaires pour qu’ils héritent de votre nouvelle classe de formulaires au lieu de celle de Django.

Les styles de bootstrap ont des formes avec

plutôt que

. Donc, si vous voulez qu’il soit beau, vous devez aller à 100% à mon humble avis. Et voici ma façon préférée de le faire:

Utilisez l’application django-bootstrap3 . Exemple:

 {% load bootstrap3 %} 
 {% csrf_token %} {% bootstrap_form form layout="horizontal" %} {% buttons submit='Sign Up »' reset='Reset Form' layout='horizontal' %}{% endbuttons %}  

Notez l’ horizontal dans 1) l’atsortingbut de classe de forme 2) la mise en page bootstrap_form et 3) la disposition des boutons.

Voici ma version utilisant django_tweaks avec un meilleur résultat. Je trouve que render_field est plus léger que l’ajout de filtres. J’ai également ajouté des messages d’alerte formatés en bootstrap et désactivé la validation du navigateur (avec novalidate). Je suis relativement nouveau sur Django alors n’hésitez pas à commenter si vous trouvez un non-sens

 
 {% csrf_token %} 
 
{{ title }}
 {% for field in form %} 
 
 {{ field.label }} {% render_field field type="text" class="form-control" placeholder="" aria-describedby="field.label|safe" %} 
 {% for error in field.errors %} 
 {{ error|escape }} 
 {% endfor %} {% if field.help_text %} 
{{ field.help_text|safe }}
 {% endif %} 
 {% endfor %} 
 
 Submit