Bootstrap bietet die folgenden Arten von Formularlayouts:
• Vertikale Form (Standard)-> Dieser sieht nicht gut aus, es sind alles mobile Versionen, und die PC-Version nimmt eine Zeile auf und sie sieht nicht gut aus.
• Inline-Formular-> Ich glaube, dies ist das, was Sie wollen, die PC-Version reagiert auf horizontale Zeilen und die mobile Version reagiert auf vertikale Zeilen.
• Horizontales Formular-> Steuerungsanzeige mit Gittersystem
1. Vertikale Form
Standardschritte für die vertikale Form verwenden
1. Fügen Sie das Element <form> hinzu.
2. Platzieren Sie die Tags und Steuerelemente in einem <div> mit "Formgruppe", um den besten Abstand zu erhalten.
3. Fügen Sie "Form-Control" -Stilen zu allen Textelementen <eingabe>, <textArea> und <auswählen> hinzu.
<Formrolle = "Form"> <div> <label for = "name"> name </label> <Eingabe type = "text" id = "name" placeholder = "Bitte geben Sie einen Namen ein.
2. Inline -Layout
Das Inline-Layout entspricht genau dem vertikalen Layout, aber Sie müssen Class = Form-Inline zu <Formrolle = "Form"> hinzufügen.
<form rolle = "form">
Nach Verwendung eines solchen Inline -Layouts wird das große Bildschirm horizontal angezeigt und der kleine Bildschirm wird vertikal angezeigt.
Kleiner Bildschirm:
Großer Bildschirm:
3. Horizontale Form
Eine horizontale Form bezieht sich auf die Ebene zwischen einem Etikett -Tag und einem Steuerelement (Eingabe, Taste).
Die Schritte für die Verwendung sind wie folgt:
• 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.
<Formrolle = "Form"> <div> <label for = "name"> name </label> <div> <Eingabe type = "text" id = "name" placeholder = "Bitte geben Sie einen Namen ein"> </div> </div> <div> <Label für = "Name"> Alter </label> </div> <Input type = "text
Erst nach der Verwendung von Form-Horizontal kann die Eingabesteuerung auf DIV eingestellt werden, und das DIV kann auch das Netzsystem verwenden. Der Form-Horizontalstil verändert das Verhalten der .form-Gruppe und wirkt sich wie Zeilen in einem Raster.
4. Kontrollkästchen und Radio
Diese beiden Steuerelemente sind in Bootstrap besonders. Manchmal müssen sie horizontal angeordnet sein, und manchmal müssen sie vertikal angeordnet sein.
Es ist auch wie eine Form und es ist auch eingebaut.
• Wenn die Inline-Anzeige erforderlich ist, stellen Sie die Klasse des von der äußeren Ebene umgebenen Etiketts auf das Kontrollkästchen ein.
• Wenn die Standard -vertikale Anzeige erforderlich ist, stellen Sie die Klasse des von der äußeren Ebene umgebenen Etiketts auf HeckBox ein.
<Formrolle = "Form"> <!-check-> <div> <label> <Eingabe type = "checkbox" value = ""> banana </label> </div> <div> <label> <Eingabe type = "checkbox" value = ""> apple </label> </div> </div> </div> </div> </div> </div> </label> </label. value = ""> banane </label> </div> <div> <label> <Eingabe type = "CheckBox" value = ""> Apple </label> </div> <div> <label> <Eingabe type = "Checkbox" value = ""> Watermelon </label> </div> <!-Single Choice-> <diveda. Männlich </label> </div> <div> <label> <Eingabe type = "radio" name = "optionsRadios" value = "option2" Checked> weiblich </label> </div> <div> <Label> <Eingabe type = "radio" name = "optionRadios" value = "option1" ups apinadios option </label> </div> <div> <div> <deladios> <eingabetyps = "option" optionRadios "option" optionRadios "option" option "option" option "option" option "option" option "option" option option Weiblich </label> </div> </form>
Der Anzeigeeffekt ist wie folgt:
5. Statische Kontrollen
Statische Kontrollen beziehen sich auf diejenigen, die den Wert nicht ändern können. Verwenden Sie in der Bootstrap, wenn Sie einfache Text hinter Form-Tags in einer horizontalen Form platzieren müssen.
<Formrolle = "Form"> <div> <label> Name </label> <div> <p> liu xuande </p> </div> </div> </form>
Der Anzeigeeffekt ist wie folgt:
6. Formularhilfe Text
Das Bootstrap-Formularhelptext bezieht sich im Allgemeinen auf die Eingabeaufforderung, normalerweise gefolgt von einem HTML-Element von .help-Block.
<Formrolle = "Form"> <div> <Eingabe type = "text"> <span> Spezielle Erinnerung, wenn Sie nichts haben, geben Sie es nicht ein. </span> </div> </form>
Der Anzeigeeffekt ist wie folgt:
Darüber hinaus verfügt Bootstrap auch über viele Spalten von Stilen, die zur Steuerung der Eingangshöhe verwendet werden, unabhängig davon, ob der Eingang erfolgreich ist.
Das obige ist das vom Editor eingeführte Bootstrap -Formularlayout. 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!