Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JavaScript.
Das Layout einer Form ist in zwei Typen unterteilt : automatisches Layout und individuelles Layout:
Das automatische Layout besteht darin, automatisch verschiedene Bootstrap-Raster basierend auf der Länge des Arrays im Konfigurationselement der zweiten Ebene im Konfigurationselement zu verwenden. Das automatische Layout kann erreicht werden, indem automatisch auf True gestellt wird.
Das automatische Layout besteht darin, das gemäß Autolayout verwendete Netz zu bestimmen. Durch die Festlegung von Autolayout: '1,2,1,2,2,4' bedeutet dies, dass die erste und die zweite Spalten 3 Gitter einnehmen und die dritte Spalte 6 Gitter ausmacht.
Der automatische Layoutcode lautet wie folgt (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-auto-layout.html):
<! DocType html> <html lang = "en"> <pead> <meta charset = "utf-8"> <title> Automatisches Layout </title> <link rel = "stylesheet" href = "../ CSS/bootstrap.css"> <script src = "../ lib/jquery.js" src="../lib/bootstrap.js"></script><!--Tools--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Automatic layout</label></div><div><form action = "#" id = "FormContainer"> </form> </div> <div> <label> Einführung </label> </div> <div> <label> Einführung </Label> </div> <div> <h3> Das sogenannte automatische Layout besteht: Verwendung automatisch unterschiedliche Raster nach der Anzahl der einzelnen Konfigurationsgruppen. Zum Beispiel: Die Anzahl der Elemente im Array beträgt 2 und verwendet dann 2, 4, 2, 4 Layout </h3> <p> auf Bootstrap-Raster-Stile und unterstützt nur 12-Segment-Formate. Wenn Sie 5 Elemente konfigurieren, wird es nicht unterstützt </p> </div> </div> <script> $ (function () {var Eles = [[{Ele: {Typ: 'Text', Name: 'Benutzername', Titel: 'Benutzername:', Erforderlich: true}}, {ele: {type: 'radio', name: 's Ex ', Titel:' Geschlecht: ', Elemente: [{text:' männlich ', Wert: 1}, {text:' weiblich ', Wert: 2}]}},], [{ele: {Typ:' Kontrollkästchen ', Name: 'Plant', Titel: 'Verwenden platform:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value : 'Hn'}]}}], [{ele: {type: 'text', name: 'displayName', title: 'display name:'}}, {ele: {type: 'datetime', name: 'fromEdate', title: 'gültig Periode: '}}, {ele: {type:' DateTime ', Name:' Todate ', Titel:' ~ '}}]; // Versteckte Formelemente werden hauptsächlich zum Bearbeiten verwendet. Der Hintergrund kann von var hides = [{id:' Guid '}] unterschieden werden. }). Render ('FormContainer');}); </script> </body> </html>Rennrenderungen:
Sie können sehen, dass die ersten und 2 Elemente in meiner Konfigurationsdatei mit 2 Spalten ausgestattet sind und das dritte Element mit 3 Spalten konfiguriert ist. Daher wird die erste und zweite Elemente der generierten Div.-Form-Gruppe verwendet: 2,4 Das dritte Element wird verwendet: 1,3 vom Schnittstellen. Die UI-Anzeige ist sehr unfreundlich.
Benutzerdefinierte Layoutcode (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html):
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> benutzerdefiniertes Layout </title> <link rel = "styleSheet" href = "../ CSS/bootstrap.css"> <!-benutzerdefinierte Website-Style. src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-Tools Methoden-> <script src = "../ scripts/global.js"> </script> <! src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <label> Benutzerdefiniertes Layout </label> </div> <div> <form action = "#" id = "FormContainer"> </form> </div> <div> <label> Einführung </label </label. Layout </h3> <p> Wenn Sie automatisch konfigurieren: 1,2 1,2 Raster wird angezeigt. Wenn kein 2,4 -System vorhanden ist Eles = [[{Ele: {Typ: 'Text', Name: 'Benutzername', Titel: 'Benutzername', Titel: 'Benutzername', Titel: 'Benutzername:' Erforderlich: true}}, {ele: {ty PE: 'Radio', Name: 'Sex', Titel: 'Geschlecht:', Elemente: [{text: 'männlich', Wert: 1}, {text: 'weiblich', value: 2}]}}, {ele: {type: 'postbox' ', Name: 'Plant', Titel: 'Verwenden Plattform: ', items: [{text:' App ', value:' App '}, {text:' web ', value:' web '}]}}, {ele: {type:' select ', name:' provi nce ', title:' province: ', withnull: true, items: [{text:' guangdong ', value:' gd '}, {text:' hunan ', value:' hn '}]}}} ],[{ele:{type:'text',name:'DisplayName',title:'display name:'}},{ele:{type:'datetime',name:'FromeDate',title:'Validation period:'}},{ele:{type:'datetime',name:'ToDate',title:'~'}}]];//Hidden form elements are mainly Zum Bearbeiten verwendet.Die Renderings sind wie folgt:
Hinweis: Wenn die Seite 4 Spalten enthält, das konfigurierte Autolayout jedoch nicht ausreicht, wird der folgende Teil das vorherige Layout verwendet, dh die erste Spalte wird als Standardkonfigurationsspalte verwendet.
Das obige ist die vollständige Beschreibung der Startstrap Smart Form Practical Series (IV) -Layout Einführung, die der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!