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.
Kommen wir zum Thema unten. Einzelheiten finden Sie unten unten:
Der Code ist wie folgt (Linkadresse: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form1-basic.html):
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Grundlegende Konfiguration </title> <link rel = "stylesheet" href = "../ CSS/bootstrap.css"> <script src = "../ lib/jquery.js" src="../lib/bootstrap.js"></script><!--Tool Methods--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Basic configuration</label></div><div><form action = "#" id = "FormContainer"> </form> </div> <div> <label> Einführung </label> </div> <div> <label> Einführung </Label> </div> <div> <h3> Unterstützte Formularelemente enthalten: Text, SELECT, RADION, DATETIME, SECKEN, SECKENTEL, textarea, custom </h3> </div> </div> </div> eles=[{ele:{type:'text',name:'UserName',title:'Username:'}},[{ele:{type:'radio',name:'sex',title:'gender:',items:[{text:'male',value:1},{text:'female',value:2}]}},{ele:{type:'checkbox', Name: 'Plant', Titel: 'Benutzerplattform:', 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: {type: {type: 'datetime', name ', from period:'}},{ele:{type:'search',name:'selectName',title:'Select:'}},{ele:{type:'textarea',name:'address',title:'Address:'}},{ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'fork Vorderseite: '}}, {ele: {next: {text:' <input type = "radio" /> '}, type:' text ', name:' next ', title:' nach hinter: '}}, {ele: {pre: {text' <input type 'text' Vordere und zurück:}},]; // Versteckte Formelemente werden hauptsächlich zur Bearbeitung verwendet.Es ist hauptsächlich der folgende JS -Abschnitt, und das Formular wird in diesem Abschnitt JS erzeugt
Rennrenderungen:
Erhalten Sie die in der Abbildung gezeigten Ergebnisse
Das obige ist die vollständige Beschreibung des Bootstrap Smart Form Practical Series (ii), 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!