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.
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
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.
Der Bootstrap -Formular -Layout -Stil lautet wie folgt
Implementierungscode:
<Formrolle = "Form"> <Fieldset> <Legend> Konfigurieren Sie die Datenquelle </legend> <div> <label for = "ds_host"> hostname </label> <div> <input id = "ds_host" type = "text" placeholder = "192.168.1.161"/</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <- id = "ds_name" type = "text" placeholder = "mSh"/> </div> </div> <div> <label für = "ds_username"> userername </label> <div> <Eingabe id = "ds_username" type id="ds_password" type="password" placeholder="123456"/> </div> </fieldset> <fieldset> <legend>Select related table</legend> <div> <label for="disabledSelect">Table name</label> <div> <select id="disabledSelect"> <option>Select </option> <option>Select </select> </div> </fieldset> <Fieldset> <Legend> Feldname </legend> <div> <Label für = "deaktiviert"> Tabelle Name </label> <div> <Select id = "deaktiviert"> <option> Keine Auswahl </option> <option> NO -Auswahl </option> </select> </div> </fieldset> </Form> </Form>
Wenn Sie noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -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.