web-dev-qa-db-fra.com

Comment puis-je contourner le besoin de Bootstrap 3 classe de contrôle de formulaire?

J'ai décidé d'essayer Bootstrap 3 ce soir pour la première fois. J'ai remarqué que, pour obtenir le joli style de champ de formulaire par défaut, vous devez ajouter un form-control classe à chaque entrée, zone de texte, sélection, etc. Ceci est pénible pour ceux qui génèrent dynamiquement leurs formulaires (par exemple, en utilisant Django). Django vous permet de définir les attributs des champs de formulaire, mais pour le faire globalement, il faudrait un correctif de singe méchant ou bien un code très non DRY.

  1. Existe-t-il un moyen d'éviter l'exigence de cette classe tout en conservant les styles de champ de formulaire de base?
  2. Existe-t-il un moyen rapide (de préférence non JS) de résoudre ce problème autrement?
csshtmlformstwitter-bootstraptwitter-bootstrap-3
25
orokusaki

Vous devriez vraiment vérifier une application Django qui rend tous vos formulaires Django comme des formulaires Nice Boostrap), simplement en utilisant une balise dans votre modèle.

Son nom est Django-bootstrap . Voici comment vous l'utilisez:

  1. Installez Django-bootstrap3

  2. Ajouter bootstrap3 à ton INSTALLED_APPS:

    INSTALLED_APPS = (
    ...
    'bootstrap3',
    ...
)

  3. Mettez à jour votre modèle:

    1. charge bootstrap3
    2. remplacez votre {{form.as_p}} à {% bootstrap3_form form %}

avant:

<form method="post" class="form-horizontal" action="" >
    <div class="hidden-desktop">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
    {% csrf_token %}
    {{ form.as_p }}
    <div class="actions form-actions">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
 </form>

après:

{% extends "base.html" %} 
{% load bootstrap3 %}

<form method="post" class="form-horizontal" action="" >
  <div class="hidden-desktop">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>
  {% csrf_token %}
  {% bootstrap_form form  %}
  <div class="actions form-actions">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>

Rien d'autre a faire. Rien à mettre à jour dans votre formulaire. Aucun piratage JavaScript.

5
ornoone

Je me demandais pourquoi la réponse ci-dessous avait obtenu des votes négatifs en premier. J'ai trouvé ma réponse au sujet du form-group À la place de la classe form-control. La classe form-control Ajoute de nombreuses règles CSS.

Vous devez essayer de contrôler la sortie de votre formulaire en premier lieu: https://stackoverflow.com/a/8474452/1596547

Si vous ne pouvez pas, vous pouvez essayer la même chose que ci-dessous. Appliquez les mêmes règles sur vos entrées au lieu de form-control, Comme:

input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Moins

Avec MOINS> 1.4, vous pouvez utiliser :extend(), voir: https://stackoverflow.com/a/15573240/1596547 . Vous pouvez l'utiliser pour ce qui précède en ajoutant une règle à vos fichiers less:

input {
  &:extend(.form-control all);
}

Voir aussi: Pourquoi donne Grunt/Recess une erreur et Lessc pas lors de la compilation Bootstrap 3 RC1?

Le form-group Est un conteneur-div autour de vos constructions d'entrée/étiquette, il n'ajoute qu'un margin-bottom: 15px;. Vous pouvez créer vos formulaires sans lui. Pour cette raison, ce n'est pas obligatoire.

Avec css, vous pouvez faire quelques contournements. Je ne pense pas que vous puissiez toujours éviter Javascript. Je ne connais pas la structure HTML de vos formulaires Django. J'ai utilisé l'exemple de formulaire de http://getbootstrap.com/css/#forms et supprimer les conteneurs form-control. Ensuite, je "corrige" les différences. REMARQUE: j'ajoute également une balise <br> devant le bouton d'envoi.

Voir: http://bootply.com/7337

1) form-group Ajoute un margin-bottom: 15px; Pour résoudre ce problème, j'ajoute cette marge aux balises d'entrée:

input {
    margin-bottom: 15px; }

Cela fonctionne accepter pour la case à cocher (et la radio). Le CSS Bootstrap définit input[type="radio"], input[type="checkbox"] { line-height: normal; margin: 4px 0 0; } Qui annule (causé par la spécificité CSS, voir: http://coding.smashingmagazine.com/2007/07/27/css) -specificity-things-you-should-know / ) le CSS pour l'entrée ci-dessus.

La règle finale sera donc:

input, input[type="checkbox"]  {
    margin-bottom: 15px;
}

2) l'étiquette de la case à cocher diffère également. REMARQUE la case à cocher n'a pas de classe form-control Mais une classe checkbox à la place. Les règles CSS pour le texte de l'étiquette sont: .radio label, .checkbox label { cursor: pointer; display: inline; font-weight: normal; margin-bottom: 0; } Dans ce cas, vous ne pouvez pas utiliser uniquement CSS (l'étiquette est un parent de la case à cocher d'entrée, et il n'y a pas de sélecteur de parent en CSS, voir: Existe-t-il un sélecteur parent CSS? ). Avec jQuery, vous pouvez sélectionner l'étiquette et ajouter une classe:

$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');

Ajoutez maintenant cette classe à votre CSS avec les mêmes règles que le .checkbox label:

.checkboxlabel
{
    cursor: pointer;
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
}

Maintenant, les deux formes ont la même apparence, je pense:

forms look the same Lisez aussi: Django Forms et Bootstrap - classes CSS et <divs>

12
Bass Jobsen

Une chose que j'ai faite a été de créer un mixin qui ajoute le form-control classe à chaque widget.

class BootStrap3FormControlMixin(object):
    def __init__(self, *args, **kwargs):
        super(BootStrap3FormControlMixin, self).__init__(*args, **kwargs)

        for field in self.fields.values():
            _class = field.widget.attrs.get('class', '')
            field.widget.attrs.update({'class': u'%s %s' % (_class, 'form-control',)})
2
emperorcezar