Formulare in Bootstrap verwenden - Eine Anleitung

Diese Seite gibt dir Tipps für die einfache Gestaltung von Formularen mit dem CSS Framework Bootstrap.

Das Bootstrap Framework bietet verschiedene CSS-Klassen, um ein Formular einzubinden und einzelne Formularfelder (z. B. ein Textfeld) vorzuformatieren.

Vorgefertigte Formulartypen

Folgende Formulartypen können verwendet werden.

Bedeutung Typ CSS-Klasse im form-Element
Standard Horizontales Formular form-horizontal
Suche (einzeilig) Suchformular form-search
Einzeiliges Formular (z. B. Login) Inline-Formular form-inline

→ Beispiele anzeigen

Anpassen der Größe von Formularfeldern

Alle Eingabefelder des Formulares, wie Textfelder, Auswahlboxen usw. können auf verschiedene Größen eingestellt werden. Dies geschieht auf 2 unterschiedliche Weisen.

  • fest (class="input-xxlarge" erzeugt ein großes Formularfeld)
  • rasterbezogen (class="span4" erzeugt ein Formularfeld, dass über 4 Spalten aufgespannt wird)

→ Beispiele anzeigen

Eingabefelder erweitern

Ein tolles Features ist die Erweiterung von Formularfeldern. So können z. B. Währungs- und Datumsangaben einfach abgefragt werden, indem bei einem Formularfeld mittels der Klasse input-append ein entsprechendes Symbol (z .B. € / DD.MM.YYYY) angefügt wird. Dies funktioniert natürlich auf am Formularanfang und in Kombination.

→ Beispiele anzeigen

Hast du eine Frage zu dieser Seite?
Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK