Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Bei der Überarbeitung meines eigenen Hintergrunds verwendete ich Bootstrap im allgemeinen Layout, und es gab keinen Grund, den verbleibenden Teil des Formens nicht zu verwenden. Für die Verschönerung und das Layout der Form ist Bootstrap auch sehr gut, mit atmosphärischen Grenzen, Multifunktionsknöpfen und Makroform-Layout ist alles so vollständig und perfekt!
Normale Form
Wir müssen die Formularelemente in die Form-Gruppenklasse einwickeln, die im Allgemeinen in <div> ... </div> gespeichert ist, und der Inhalt des Formularelementnamens wird im Allgemeinen in der Etikettsbezeichnung platziert, und der Name der Eingabetikettenklasse ist Form-Kontroll. Es ist erwähnenswert, dass Ihr Kontrollkästchen und Ihre Radioelemente in Ihrer eigenen DIV geschrieben werden müssen.
Zum Beispiel das folgende Formular
<form> <div> <label für = "exampleInputemail1"> E -Mail -Adresse </Label> <Eingabe type = "E -Mail" id = "examplePputemail1" placeholder = "E -Mail"> </div> <div> <label für = "examplePpassword1"> Passwort </Label> </div> id = "id =" id = "exampleppassword1" placeholder = "kennwort" kennwort "</div> <divputpassword1" for = "exampleInputFile"> Dateieingabe </label> <Eingabe type = "password" id = "exampleInpasspassword1" placeholder = "password"> </div> <div> <label für = "exampleInputFile"> Dateieingabe </label> <Eingabe type = "Datei" id = "exampleInputFile"> <p> Beispiel-Block-Level-Eingabetyp ". Überprüfen Sie mich aus </Label> </div> <Button type = "Senden"> Senden </button> </form>
Effekt nach dem Laufen
Horizontale Emissionsform
Wenn Ihre Formularelemente horizontal entlassen werden müssen, können Sie dem Formular eine Klasse-Form-Inline hinzufügen. Diese Form ist im Allgemeinen besser geeignet, wenn weniger Elemente vorhanden sind.
Zum Beispiel
<form> <div> <label für = "exampleInputemail3"> E -Mail -Adresse </Label> <Eingabe type = "E -Mail" id = "examplePputemail3" placeholder = "E -Mail"> </div> <div> <label für = "exampleppassword3"> Passwort </Label> </div> id = "id =" exampleppassword3 "placeholder =" passhotder = "kennwort" </div> <div> <codentpassword3 " type = "checkBox"> merke me </label> </div> <button type = "subieren"> signieren Sie </button> </form>
Gewöhnliche Form + Element Horizontale Emission
Diese Form ist die am häufigsten verwendete. Wenn sich gewöhnliche Benutzer registrieren und Informationen ausfüllen, können sie häufig die folgenden Formulareffekte sehen.
Implementieren dieses Formular
Formular> <div> <Label für = "InputEMail3"> E -Mail </Label> <div> <Eingabe type = "E -Mail" id = "InputEmail3" Placeholder = "E -Mail"> </div> </div> <div> <Label für = "InputPassword3"> Passwort </label> </div> </div> <divpassword: <Eingabe type = "checkbox"> merke me </label> </div> </div> </div> </div> <div> <div> <button type = "enden"> signieren Sie in </button> </div> </div> </div> </form>
Wir können auch den Code durchsehen, dass Sie beim Formularlayout auch Col-SM- und Col-SM-Offset für das Grid-Layout verwenden können!
Das obige ist eine umfassende Analyse des vom Editor eingeführten Bootstrap -Formulars. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!