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.
Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton von Twitter entwickelt. Bootstrap ist ein Open -Source -Produkt, das im August 2011 auf GitHub veröffentlicht wurde.
Inhalt des Bootstrap -Pakets
Grundstruktur: Bootstrap bietet eine Grundstruktur mit einem Gittersystem, einem Linkstil und einem Hintergrund. Dies wird im Abschnitt "Bootstrap" ausführlich erklärt.
CSS: Bootstrap verfügt über die folgenden Funktionen: Globale CSS -Einstellungen, Definition der grundlegenden HTML -Elementstile, erweiterbarer Klasse und eines erweiterten Gittersystems. Dies wird im Bereich Bootstrap CSS ausführlich erläutert.
Komponenten: Bootstrap enthält mehr als ein Dutzend wiederverwendbarer Komponenten zum Erstellen von Bildern, Dropdown-Menüs, Navigation, Warnboxen, Popup-Boxen und vielem mehr. Dies wird im Abschnitt Layoutkomponenten ausführlich erläutert.
JavaScript -Plugin: Bootstrap enthält mehr als ein Dutzend benutzerdefinierte JQuery -Plugins. Sie können alle Plugins direkt oder einzeln einfügen. Dies wird im Bootstrap-Plug-in-Abschnitt ausführlich erläutert.
Anpassung: Sie können Bootstrap-Komponenten, weniger Variablen und JQuery-Plug-Ins anpassen, um eine eigene Version zu erhalten.
In diesem Kapitel wird nach dem Generieren eines Formulars (normalerweise zum Bearbeiten von Seiten verwendet) in ein Formular angezeigt, wie ein Modelldaten in ein Formular angezeigt werden.
Der Code ist wie folgt (Verbindungsadresse: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html):
<! DocType html> <html lang = "en"> <pead> <meta charset = "utf-8"> <title> Datenbindung </title> <meta name = "viewPort" content = "width = Geräte-Width, initial-scale = 1"> <link rel = "stylesheet"-href = ". rel = "styleSheet" href = "../ CSS/site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> </scriptin-scrc = "scripts/global.js"> </</</</</scripts- src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <label> Datenbindung </Label> <div> <button id = "btnsubmit"> Senden Sie das Formular </button> </div> </div> <div> <Form Action = "#"#". ID = "FormContainer"> </form> </div> <div> <div> <label> Einführung </label> </div> <div> <label> Einführung </label> </div> <h3> Formdatenbindung </h3> <blockquote> <p> JSON -Format -Format -Format -Format -Model mit simulierten Modelldaten hier hier. In der tatsächlichen Umgebung sollte es mit dem Server interagieren, um Daten zu erhalten. Im Konfigurationsobjekt ist eine Rückrufmethode erforderlich. Einige andere Operationen des Formulars können in der Rückgabemethode durchgeführt werden, z. B. das Hinzufügen von Formularüberprüfung und das Hinzufügen von Datum Plug-In Support Benutzername: '}, ele: {Typ:' Text ', Name:' Benutzername ', Titel:' Benutzername: ', Erforderlich: true}}, {ele: {type:' radio ', nam E: 'Sex', Titel: 'Geschlecht:', Elemente: [{text: 'männlich', Wert: 1}, {text: 'weiblich', Wert: 2}]}}, {ele: {Typ: 'Kontrollkästchen', Name: 'Plant', Titel: 'Verwenden von Plattform:', Elemente: [{text: 'App', Wert: 'App'}, {text: 'web', value: 'web'}]}}} ],[{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value:'HN'}]}},{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'display name:'}},{ele:{type:'search',title:'Product',id:'ProductName'}}],[{ele:{type:'datetime',name:'FromeDate',title:'Validation Periode: '}}, {ele: {type:' datetime ', name:' todate ', title:' ~ '},]; // versteckte Formelemente werden hauptsächlich zur Bearbeitung verwendet. '1,3'}). Render ('FormContainer', Funktion (bf) {var model = {primaryKey: 1, Benutzername: 'xxg', Sex: 1, Pflanze: ['App', 'Web'], Provinz: 'GD', DisplayName: 'Test', ProductName: 'Notizb OOK ', FromEdate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initFormData (Modell);}); () {var postdata = bsform.getFormData (); alert ("Die erhaltenen Ausdrucksdaten sind:"+json.Stringify (Postdata));})}); </script> </body> </html>Hier wird ein JSON-Modell mit JS erstellt. In der tatsächlichen Entwicklung interagieren Sie mit dem Server, um ein Modell zu erhalten. Das Modell wird im Formularformular über die InitFormData-Methode des Formular-Plug-Ins angezeigt.
Die Renderings sind wie folgt:
Die definierten Daten werden erfolgreich im Formular angezeigt
Hinweis: Bei mehreren Auswahlmöglichkeiten für Kontrollkästchen muss ein Array zurückgegeben werden
Das obige ist die vollständige Beschreibung der Datenbindung der mit dem Editor vorgestellten Bearbeitungsseite der Bootstrap Smart Form Practical Series (VI). 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!