Comment puis-je contourner le besoin de Bootstrap 3 du formulaire de contrôle de la classe?
J'ai décidé d'essayer de Bootstrap 3, ce soir, pour la première fois. J'ai remarqué que, pour obtenir la valeur par défaut, jolie forme de champ de style, vous devez ajouter un form-control
classe pour chaque input, textarea, select, etc. C'est une douleur pour ceux qui générer dynamiquement leurs formes (p. ex., à l'aide de Django). Django permet de définir les attributs de champs de formulaire, mais de le faire à l'échelle mondiale aurait besoin d'un singe méchant patch ou autre chose très non-SEC code.
- Est-il un moyen pour éviter la nécessité de cette classe, toujours en conservant la forme de base du champ de styles?
- Est-il un moyen rapide (de préférence non-JS) pour répondre à ce le contraire?
- Pour les autres Django utilisateurs qui trouvent ça, mon éventuelle solution est de simplement remplacer Django
Form.__init__
, délégué àsuper
, puis itérerself.fields
, la mise à jour de chaquewidget.attrs.get('class', '')
inclureform-control
, si le widget a été unTextInput
, unSelect
, ou unTextarea
. Si vous faites de même, assurez-vous d'ajouter leform-control
classe, vs simplement le paramètre (de sorte que vous ne supprimez pas les classes existantes qui sont ajoutés à une forme de widget. - Pour Django utilisateurs:
django-widget-tweaks
est aussi une solution acceptable.
Vous devez vous connecter pour publier un commentaire.
Vous vraiment devriez vérifier un Django app qui rendent tous vos Django formes comme nice Bootstrap formes, simplement en utilisant une balise dans votre modèle.
Son nom est django-bootstrap3. Voici comment l'utiliser:
Ajouter
bootstrap3
à votreINSTALLED_APPS
:Mise à jour de votre modèle:
bootstrap3
{{form.as_p}}
à{% bootstrap3_form form %}
avant:
après:
Rien d'autre à faire. Rien à mettre à jour en vous forme. Pas de JavaScript hacks.
Je me demandais pourquoi la réponse ci-dessous obtenu downvotes premier. J'ai trouvé ma réponse sur le
form-group
en place de laform-control
classe. La classeform-control
ajoute de nombreuses règles CSS.Vous devriez essayer de contrôler votre formulaire de sortie, en premier lieu: https://stackoverflow.com/a/8474452/1596547
Si vous ne pouvez pas, vous pouvez essayer la même chose que ci-dessous. Appliquer les mêmes règles sur vos entrées au lieu de la
form-control
, comme:Moins
Avec MOINS de > la version 1.4, vous pouvez utiliser
:extend()
, voir: https://stackoverflow.com/a/15573240/1596547. Vous pouvez l'utiliser pour la ci-dessus en ajoutant une règle aux moins de fichiers:Voir aussi: Pourquoi donne Grunt /Évidement une erreur et Lessc pas lors de la compilation de Bootstrap 3 RC1?
Le
form-group
est un conteneur div autour de votre entrée /étiquette de constructions qu'il n'ajoute qu'unemargin-bottom: 15px;
. Vous pouvez construire vos formes sans elle. Pour cette raison, il n'est pas nécessaire.Avec css, vous pourriez faire quelques solutions de contournement. Je ne pense pas que vous pouvez éviter Javascript toujours.
Je ne connais pas le HTML-structure de votre Django formes. J'ai utilisé le formulaire de l'exemple de http://getbootstrap.com/css/#forms et de la bande de la
form-control
conteneurs. Ensuite, j'ai "corrigé" les différences. REMARQUE j'ai aussi ajouter un<br>
tag devant le bouton soumettre.Voir: http://bootply.com/73370
1)
form-group
ajoute unmargin-bottom: 15px;
pour résoudre ce problème que je ajouter cette marge à l'entrée tags:Cela fonctionne accepter pour la case (et la radio). Le Bootstrap CSS définit
input[type="radio"], input[type="checkbox"] {
qui annule (causée par CSS Spécificité, voir: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ) le css pour l'entrée ci-dessus.line-height: normal;
margin: 4px 0 0;
}
Donc la dernière règle sera:
2) le libellé de la case à cocher diffère également. REMARQUE la case à cocher n'ont pas environnant
form-control
mais uncheckbox
classe dans la place. Les règles css pour le texte de l'étiquette sont:.radio label, .checkbox label {
j'ai ce cas, vous ne pouvez pas utiliser les CSS (le label est un parent de la case à cocher entrée, et il n'est pas parent sélecteur CSS, voir: Est-il un CSS sélecteur parent?). Avec jQuery, vous pouvez sélectionner l'étiquette et de l'ajout d'une classe:cursor: pointer;
display: inline;
font-weight: normal;
margin-bottom: 0;
}
Maintenant ajouter cette classe CSS avec les mêmes règles que le
.checkbox label
:Maintenant les deux formes semblent fondamentalement la même, je pense:
Lire aussi: Django Formes et Bootstrap - classes CSS et <balise div>
as_p
. Je pense que ce sera beaucoup plus simple que d'avoir à remplacer un tas de widgets, qui serait alors de me demander de remplacerformfield_for_dbfield
ou quelque chose, etc. J'étais moins intéressé par l'ajout d'un tas de feuilles de style CSS, même si mes racines sont dans le CSS, je suis en train de construire mon site avec aussi peu de CSS personnalisé que possible, donc, je considèreas_p
à le meilleure approche ici.input[type=button]
,input[type=radio]
etinput[type=checkbox]
ne bénéficient pas du même style.Une chose que j'ai faite a été de créer un mixin qui ajoute de la
form-control
classe pour chaque widget.