Bootstrap bietet drei Formularlayouts: vertikale Form, Inline -Form und horizontale Form. Lassen Sie mich es Ihnen nacheinander vorstellen. Interessierte Freunde werden zusammen lernen.
Erstellen Sie eine vertikale oder grundlegende Form:
• ・ Fügen Sie dem übergeordneten Element <Formular> Element rollen = "Form" hinzu.
• ・ Legen Sie die Tags und Steuerelemente in eine <div> mit der Klasse-Form-Gruppe. Dies ist notwendig, um den besten Abstand zu erhalten.
• ・ Fügen Sie alle Textelemente <eingabe>, <textArea> und <Select> Klasse.
<Formrolle = "Form"> <div> <label for = "name"> name </label> <Eingabe type = "text" id = "name" placeholder = "Bitte geben Sie einen Namen ein"> </div> <div> <label für = "inputFile"> Dateieingabe </Label> <Eingabe-Typ "Datei" id = "inputFile"> <p> Dies ist ein Beispiel für Block-Level-Hilfstext. </p> </div> <div> <label> <Eingabe -Typ = "Kontrollkästchen"> Bitte überprüfen Sie </label> </div> <Schaltfläche Typ = "Senden"> Senden </button> </Form>
Inline -Form:
Alle Elemente in der Inline -Form sind nach links ausgerichtet und die Etiketten sind nebeneinander. Um ein Inline -Formular zu erstellen, müssen Sie dem Formular -Tag eine Klasse hinzufügen.
.Forminline
<form role="form"><div><label for="name">Name</label><input type="text" id="name"placeholder="Please enter a name"></div><div><label for="inputfile">File input</label><input type="file" id="inputfile"></div><div><label><input type="checkbox">Please check</label></div><button Typ = "Senden"> Senden </button> </form>
Der Anzeigeeffekt ist wie folgt:
HINWEIS: Standardmäßig Eingabe, Auswählen und Textbereich in Bootstrap haben 100% Breite. Bei Verwendung von Inline -Formularen müssen Sie eine Breite der Formularsteuerung festlegen.
Horizontale Form: Unterscheidet sich von den beiden anderen Formularen, müssen Sie die folgenden Schritte ausführen, um eine horizontale Form zu erstellen.
• Fügen Sie dem übergeordneten Element <form> Klasse. Form-horizontal hinzu.
• Stellen Sie die Tags und Steuerelemente in eine <div> mit der Klasse-Form-Gruppe ein.
• Fügen Sie der Klasse. CONTROL-LABEL zum Etikett hinzu.
Zum Beispiel:
<Formrolle = "Form"> <div> <label for = "FirstName"> Name </Label> <div> <Eingabe type = "text" id = "firstname" placeholder = "Bitte geben Sie einen Vornamen ein. Name "> </div> </div> <div> <label> <Eingabe type =" CheckBox "> MEINE ME </LABE
Das obige ist die vollständige Beschreibung des Siebten Bootstrap -Formularlayout -Beispiels -Code -Codes -Codes (drei Formulare -Layouts), die Ihnen vom Editor vorgestellt wurden. 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!