Qu'est-ce que Bootstrap?
Bootstrap est un cadre frontal pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JavaScript.
La disposition d'une forme est divisée en deux types: disposition automatique et disposition personnalisée:
La disposition automatique consiste à utiliser automatiquement différents rasters bootstrap en fonction de la longueur du tableau dans l'élément de configuration de deuxième niveau dans l'élément de configuration. La disposition automatique peut être réalisée en définissant AutoLayout sur true.
La disposition automatique consiste à déterminer la grille utilisée selon AutoLayout. En définissant AutoLayout: «1,2,1,2,2,4», cela signifie que les premières et deuxième colonnes occupent 3 grilles et la troisième colonne représente 6 grilles.
Le code de mise en page automatique est le suivant (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-auto-layout.html):
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <title> disposition automatique </ title> <link rel = "Stylesheet" href = "../ css / bootstrap.css"> <script src = "../ lib / jquery.js"> </ script> </ script> src = "../ lib / bootstrap.js"> </ script> <! - Tools -> <script src = "../ scripts / global.js"> </ script> <! - Plug-in -> <script src = "../ div> <label>.js"> </ / laboratoire Action = "#" id = "formContainer"> </ form> </div> <div> <label> Introduction </ labe> </div> <div> <vabed> Introduction </ Label> </div> <div> <h3> La disposition dite automatique est: d'utiliser automatiquement différents rasters en fonction du nombre de groupes de configuration individuels. Par exemple: le nombre d'éléments dans le tableau est 2, puis utilisez 2, 4, 2, 4 disposition </h3> <p> compter sur des styles raster bootstrap et ne prend en charge que des formats à 12 segments. Si vous configurez 5 éléments, il n'est pas pris en charge </p> </div> </div> <cript> $ (function () {var eles = [[{ele: {type: 'text', name: 'username', titre: 'nom d'utilisateur:', obligatoire: true}}, {ele: {type: 'radio', nom: 'S ex ', title:' Gender: ', items: [{text:' mâle ', valeur: 1}, {text:' feme ', valeur: 2}]}},], [{ele: {type:' Checkbox ', Nom: «Plant», titre: «Utilisation Plateforme: ', éléments: [{text:' app ', valeur:' app '}, {text:' web ', valeur:' web '}]}}, {ele: {type:' select ', name:' province ', titre:' province: ', withnull: true, items: [{text:' guangdong ', `` gd' '}, {tex : 'Hn'}]}}], [{ele: {type: 'text', name: 'displayName', title: 'affiche name:'}}, {ele: {type: 'datetime', name: 'fromedate', title: 'valide Période: '}}, {ele: {type:' DateTime ', nom:' todate ', titre:' ~ '}}]] }). Render ('formContainer');}); </cript> </ body> </html>Renforts de course:
Vous pouvez voir que les premiers et 2 éléments de mon fichier de configuration sont équipés de 2 colonnes, et le troisième élément est configuré avec 3 colonnes, de sorte que les première et deuxième éléments de la div.form-group générée sont utilisées: 2,4 Le troisième élément est utilisé: 1,3 à partir de l'interface, l'écran UI est très sans ami, donc Autolayout: True est généralement utilisé dans des scénarios spéciaux et que chaque élément est égal.
Code de mise en page personnalisé (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html):
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> disposition personnalisée </ title> <link rel = "Stylesheet" href = "../ css / bootstrap.css"> <! - Site personnalisé Style -> <link rel = "StyleSheet" href = ".. CSS / site. src = "../ lib / jQuery.js"> </ script> <script src = "../ lib / bootstrap.js"> </ script> <! - Méthodes d'outils -> <script src = "../ scripts / global.js"> </ script> <! - Plugin -> <script src = "../ scripts / plugin.js"> </ script> </ head> <body> <div> <div> <vabed> Layout personnalisé </vabe> </ div> <v> <form action = "#" id = "formContainer"> </ form> </div> <v> <vabed> Introduction </vold> </ div> <v> <bablow> Disposition </h3> <p> Si vous configurez AutoLayout: 1,2 1,2 Raster sera affiché </p> <p> Si vous configurez Autolayout: 1,2,2,4, le premier élément sera mis en place en utilisant 1,2, et le second sera la mise en page en utilisant 2,4. S'il n'y a pas de système 2,4 rechercheront automatiquement 1,2 </p> </div> <cript> $ (function () {var eles = [[{ele: {type: 'text', name: 'username', title: 'username', titre: 'username', titre: 'username:' requis: true}}, {ele: {Ty PE: 'Radio', nom: 'Sex', titre: 'Gender:', éléments: [{texte: 'mâle', valeur: 1}, {texte: 'femelle', valeur: 2}]}}, {ele: {type: 'cochebox', Nom: «Plant», titre: «Utilisation Platform: ', items: [{text:' app ', valeur:' app '}, {text:' web ', valeur:' web '}]}}, {ele: {type:' select ', name:' provi nce ', titre:' province: ', withnull: true, items: [{text:' guangdong ', valeur:' gd '}, {text:' hunan ', valeur:' hn '}]}} ], [{ele: {type: 'text', name: 'affichename', title: 'affichage name:'}}, {ele: {type: 'datetime', name: 'fromedate', title: 'validation périod pour l'édition.Les rendus sont les suivants:
Remarque: Si la page a 4 colonnes, mais que le AutoLayout configuré est insuffisant, la partie suivante utilisera la disposition précédente, c'est-à-dire que la première colonne est utilisée comme colonne de configuration par défaut.
Ce qui précède est la description complète de l'introduction de la disposition du formulaire Bootstrap Smart Form (IV) que l'éditeur vous a présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!