Einführung in das Bootstrap-Formularlayout

HTML und CSS sind die Basissprachen für die Gestaltung von Website-Formularen. Alle grundlegenden Vorlagen werden von HTML erstellt, aber wir müssen eine eindeutige, dann separat benötigte CSS-Datei entwerfen und erstellen. Diese Methode ist aufgrund von Klassen- und ID-Referenzen kompliziert. Um alle Probleme in HTML- und CSS-Dateien zu überwinden, kommt Bootstrap. Bootstrap ist eine fortschrittliche Technik für das Webdesign. Für die Validierung und das erforderliche Format des Formulars verfügt Bootstrap über eine eigene Klasse für Textarea, Eingabe und andere Steuerelemente wie Formularsteuerung, Eingabegruppe usw. Mithilfe des Bootstrap-Layouts können wir das Format des Formulars festlegen. Mit Bootstrap können wir problemlos vertikale, horizontale und Inline-Formularformate erstellen.

Arten des Bootstrap-Formularlayouts

Durch das Bootstrap-Formularlayout wird ein anderer Formulartyp erstellt. Es macht Design und Validierung ohne CSS und JavaScript-Dateien. Reduzieren Sie aufgrund des Formularlayouts mehr Codierung und Komplikationen. Bootstrap hat eine eigene Klasse, um alle komplexen CSS- und JavaScript-Codes zu überwinden.

Bootstrap verfügt über drei Arten von Formularlayouts.

  • Vertikale Form
  • Horizontale Form
  • Inline-Formular

Sehen wir uns diese drei Typen im Detail an:

1. Vertikale Form

Im vertikalen Formularlayout sind Beschriftungs- und Textelemente vertikal und jede Formulargruppe vertikal. Die vertikale Form ist die Standardform in Bootstrap. Es gibt keine zusätzliche Regel für das vertikale Formularformat.

2. Horizontale Form

Im horizontalen Formularlayout sind Beschriftungs- und Textelemente horizontal, aber jede Formulargruppe ist vertikal . Fügen Sie zwei Hauptklassen für die horizontale Form hinzu.

Fügen Sie die Klasse im Formularelement hinzu.

Fügen Sie die Klasse in die Beschriftungselemente ein.

3. Inline-Formular

In Inline-Form sind Beschriftung und Elemente inline und linksbündig. Viewport mindestens 768px breit. Fügen Sie eine Klasse für das Inline-Formular hinzu.

Fügen Sie die Klasse zu den Formularelementen hinzu.

Das Bootstrap-Formularlayout verfügt über eine Standardklasse für die unten genannte Formularkonvention:

  • .form-group: Diese Klasse wird für den Formularabstand und das Binden des Etiketts verwendet. Es ist flexibel für das Binden von Formularvalidierungsnachrichten und mehr für Formulare.
  • . form-control: Diese Klasse wird für alle Textelemente und den Platz für Formulare usw. verwendet. Sie wird für alle Stile wie Größe und Fokus verwendet.
  • .form-control-lg und .form-control-sm werden für große bzw. kleine Eingabeelemente verwendet.

Unterstützte Elemente und Klassen

Einige unterstützte Elemente und Klassen für die Bootstrap-Formularüberprüfung ohne JavaScript. Es macht einfach und überwindet viel serverseitiges Validierungscoding.

1) .form-control-Datei: Diese Klasse wird verwendet, um eine Datei wie pdf, Docx usw. hinzuzufügen, anstatt die Klasse form-control in Dateidaten zu verwenden, in denen diese Klasse verwendet.

Beispiel:

2) Schreibgeschützt: Dies ist ein Boolesches Attribut, das für Eingabeelemente verwendet wird. In diesem Attribut kann der Benutzer den Wert nicht ändern und den Cursor zum Schreiben deaktivieren.

Beispiel:

3) .form-control-plaintext: Diese Klasse funktioniert genauso wie schreibgeschützt, hat jedoch den richtigen Rand und die richtige Auffüllung.

Beispiel:

Beispiel für ein Bootstrap-Formularlayout

Die angegebenen Beispiele sind unten angegeben:

1. Beispiel für eine vertikale Form (Standardform)


Name:

Email:

  • Die vertikale Form ist eine einfache Standardform in Bootstrap.
  • Das obige Beispiel hat zwei Eingabefelder und eine Anmeldeschaltfläche vertikal mit der Beschriftung.
  • Mit nur Klassenformulargruppe und Klassenformularsteuerung wird das vertikale Formular erstellt.
  • Sie können die Größe der Eingabeelemente ändern, ohne die Größe der CSS-Datei anpassen zu müssen. Der Benutzer benötigt lediglich die Klassen .form-control-lg und .form-control-sm für große bzw. kleine Größen.

2. Beispiel einer horizontalen Form

class=”form-horizontal”>
Name:


Email:


  • Mit der Klasse form-horizontal erstellt der Benutzer eine horizontale Form. Beschriftung und Eingabeelement sind inline, aber die Klasse form-group ist vertikal. Klasse "Kontrolletikett col-sm-2" und = "col-sm-10" für geteilte Spalte. Zweispaltige Zuweisung für Beschriftung und Zehn Spalten für Eingabeelemente.
  • Klasse ”col-sm-offset-2 col-sm-10”, die für die Anmeldeschaltfläche verwendet wird. Versatz für Leerzeichen, Spalte-Sm-Versatz-2 verwendet zweispaltige Leerzeichen von links in einem Formular.
  • Siehe Beispiel für ein horizontales Formular und dessen Ausgabe, um das Layout zu verstehen. Der angezeigte Name und der eingegebene Text befinden sich in einer Zeile, die E-Mail-Adresse und die Elemente in einer anderen Zeile.
  • Bei großen und mittleren Bildschirmformaten erscheint das horizontale Layout, bei kleinen Bildschirmformaten (767px und darunter) dagegen das vertikale.
  • Die horizontale Form ist mit der herkömmlichen Methode kompliziert, aber das Bootstrap-Layout erleichtert die Verwendung der Klassen- und Label-Steuerung.

3. Beispiel eines Inline-Formulars

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • In Inline-Form befinden sich alle Beschriftungen und Elemente in einer Zeile. Alle Formulargruppen befinden sich in einer einzigen Zeile. Die Klasse form-inline ist die Standardeinstellung für dieses Layout. Der Benutzer hat diese Klasse in platziert. Das Inline-Formular wird eher für Optionsfelder, Kontrollkästchen usw. verwendet.
  • Dieses Formular funktioniert meistens in mindestens 576px-Ansichtsfenstern, danach wird es wie das Standardformular angezeigt. In label wird nur die Klasse sr verwendet. Diese Klasse ist ein Screenreader, mit dem die Beschriftung ausgeblendet und das einzige Element angezeigt wird.
  • Wenn das Eingabeelement im Inline-Formular vorhanden ist, muss der Benutzer einen Platzhalter in ein Eingabeelement einfügen, um das Element zu erkennen.

Fazit - Bootstrap vom Layout

Um die Bootstrap-Technologie zu verstehen, muss der Benutzer mit HTML, CSS und JavaScript vertraut sein. Das Bootstrap-Formular ist die einfachste Möglichkeit, ein Formular im Standardformat zu bearbeiten. Es hat eigene Klassen zum Entfernen der Codierung und nicht benötigte CSS- und JavaScript-Dateien. Mithilfe des Bootstrap-Formulars kann der Benutzer die Codierung beschleunigen und das Design und den Stil der Blockcodierung vermeiden. Bootstrap ist ein Framework für das Front-End-Webdesign, das leichtgewichtig und selbst implementiert ist.

Empfohlene Artikel

Dies ist eine Anleitung zum Bootstrap-Formularlayout. Hier diskutieren wir die Einführung in das Bootstrap-Formularlayout zusammen mit den Typen und Beispielen. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren.

  1. Bootstrap-Typografie
  2. Bootstrap-Layout
  3. Bootstrap-Grid-System
  4. Bootstrap-Komponenten

Kategorie:

Software-Entwicklung