Bootstrap -Formulare | Erklärt

Bootstrap -Formulare sind ein entscheidender Bestandteil jeder Anwendung. Sie ermöglichen die Interaktion der Benutzer und die Eingabe in das System. Mehrere Bootstrap-Klassen bieten vorentwickelte Formularsteuerung und Styling-Optionen, um reaktionsschnelle und saubere Formulare zu erstellen. Insbesondere bestehen Bootstrap -Formulare aus verschiedenen Formularelementen, wie z.

Diese Beschreibung wird abdecken:

• So erstellen Sie ein Inline -Formular in Bootstrap?
• So setzen Sie den Abstand in Inline -Form?
• So erstellen Sie eine gestapelte Form in Bootstrap?
• So erstellen Sie ein Formular mit Gitterreihen?
• So erstellen Sie ein kompaktes Layoutformular?
• So erstellen Sie eine horizontale Form?
• So setzen Sie die Etikettengrößen des Formulars?

So erstellen Sie ein Inline -Formular in Bootstrap?

Inline -Formulare werden mit der “erstellt“.Form-Inline" Klasse. Diese Klasse hat ein vordefiniertes CSS “Anzeige”Eigenschaft mit dem Wert“biegen”Mit anderen Eigenschaften.

Beispiel

Schauen Sie sich das Beispiel an, das zeigt, wie ein Inline -Formular in Bootstrap erstellt wird:

• Zuerst fügen Sie eine "hinzu""Element mit der Klasse"Form-Inline”.
• Fügen Sie zwei hinzu “"Elemente mit dem"Gruppe formen" Klasse.
• Jedes "" Element enthält das "" Und "Elemente.
• Zuletzt fügen Sie eine "hinzu"Element zum Erstellen einer Schaltfläche:

Email



Passwort

Einreichen

Ausgang

So setzen Sie den Abstand in Inline -Form?

Die Bootstrap -Abstands -Dienstprogramme passen den Abstand einer Inline -Form an. Diese beinhalten "ml-*"Für Margen-Links" "Herr-*”Für Randrechte und viele mehr. Der "*”Repräsentiert die Größe.

Eine praktische Demonstration finden Sie im folgenden Beispiel.

Beispiel

Fügen Sie im laufenden Beispiel die Klasse hinzu “ML-2"Zum" "Element. Es wird links vom Etikett Platz erzeugen:

Email



Passwort

Einreichen

Ausgang

So erstellen Sie eine gestapelte Form in Bootstrap?

Die gestapelten Formen beziehen sich auf die vertikalen Formen. Dies ist ein Standardformular.

Schauen Sie sich das Beispiel unten an.

Beispiel

Befolgen Sie die angegebenen Anweisungen, um eine vertikale Form zu erstellen:

• Füge hinzu ein "" Element.
• Darin fügen Sie eine hinzu “"Tag und zuweisen Sie ihm eine Klasse" Formgruppe ".
• Dieses "" -Element enthält das "" Und "Elemente. Sie können die Formularelemente entsprechend Ihren Vorlieben hinzufügen.
• Fügen Sie am Ende eine "hinzu"”In die Form:

Email



Passwort

Einreichen

Ausgang

So erstellen Sie ein Formular mit Gitterreihen?

Ein Formular mit Bootstrap Grid zu erstellen ist sehr einfach. Geben Sie zunächst eine Zeile an und erstellen Sie Spalten für die darin enthaltenen Formulareingänge.

Analysieren Sie das folgende Beispiel unten.

Beispiel

Befolgen Sie die Anweisungen, um ein Formular mit dem Bootstrap Grid zu erstellen:

• Füge hinzu ein "" Element.
• Darin fügen Sie eine hinzu “"Container mit der Klasse" Zeile ".
• Drinnen “ReiheContainer, geben Sie zwei weitere „“ Elemente mit der „Col“ -Klasse an.
• Ergänzen Sie die "<Etikett> "Und"<Eingang> ”Elemente innerhalb jedes„ “Elements:

Name



Email

Ausgang

So erstellen Sie ein kompaktes Layoutformular?

Für kompakte und engere Layouts die “Formreihe"Klasse wird anstelle der" verwendet "Reihe" Klasse:

Name



Email

Ausgang

So erstellen Sie eine horizontale Form?

Die horizontalen Formen werden durch die Verwendung der “erstelltReihe" Und "col-*-*" Klassen. Der "ReiheDie Klasse gibt eine Zeile an, und die Klassen „col-*-*“ definieren die Breite von Etiketten und Kontrollen, wie z. "col-sm-2","Col-MD-6" oder mehr. Das "Col-Form-Label" muss auch dem "" "Element" hinzugefügt werden.

Beispiel

Um eine horizontale Form zu erstellen, probieren Sie die angegebenen Anweisungen aus:

• Zuerst fügen Sie eine "hinzu"" Element.
• Fügen Sie in IT eine "hinzu""Element mit den Klassen"Gruppe formen" Und "Reihe”.
• Geben Sie die Formulargruppen innerhalb dieser an “" Element. In unserem Fall das “" und das "”Elemente werden angegeben.
• Der ""Element wird in einem anderen platziert"" Unterricht haben "col-sm-6”. Es wird 6 Gitterspalten für die “angeben" Element:

Name





Adresse




Einreichen

Ausgang

So stellen Sie die Etikettengrößen von Form an?

Die grosse von "Element kann einfach durch die Verwendung der “eingestellt werdencol-form-label-sm" Und "col-form-label-lg”. Das „Col-Form-Label-SM“ hat ein vordefiniertes CSS “Schriftgröße”Eigenschaft mit dem Wert“0.875rem”Mit anderen Eigenschaften. Das „Col-Form-Label-Lg“ hat ein vordefiniertes CSS “Schriftgröße”Eigenschaft mit dem Wert“1.25rem”Mit anderen Eigenschaften.

Beispiel

Fügen Sie im laufenden Beispiel das erste "Col-Form-Label-SM" zum ersten "" -Element und "col-form-label-lg" zum zweiten hinzu, um den Unterschied zu erkennen:

Name





Adresse




Einreichen

Ausgang

Sie haben erfolgreich erfahren, wie Sie Formulare mit Bootstrap erstellen können.

Abschluss

Bootstrap bietet eine einfache Methode zur Erzeugung reaktionsschneller und konsistenter Formen. Es gibt hauptsächlich drei Arten von Bootstrap -Formen: Inline-, gestapelte und horizontale Formen. Ein Inline -Formular wird mit der “erstellt“Form-Inline" Klasse. Um allgemeine Stile für die Gruppe von Formelemente anzugeben, ist die “Gruppe formen”Klasse wird verwendet. Insbesondere gibt es mehrere Klassen, die dazu beitragen. Diese Beschreibung hat gezeigt, wie man Formulare mit Bootstrap erstellt.