Bootstrap bietet drei Formularlayouts: vertikale Form, Inline -Form und horizontale Form
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 die Klasse.Form-Inline hinzufügen
<form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <label for="input file">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. <div> <div> <label> <Eingabe type = "pokeBox"> merke me </label> </div> </div> </div> <div> <div> <button type = "enden"> Login </button> </div> </div> </form>
Der Anzeigeeffekt ist wie folgt:
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.