Bootstrap 4 und 5

Bootstrap 4 und 5 Layouts

Hinweis: Diese Feature sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.

Flexible, mehrspaltige responsive Formulare

Bootstrap 4 und 5 sind moderne und weit entwickelte UI-Frameworks. Mit einem “Mobile First” Ansatz bieten sie die M├Âglichkeit extrem flexible responsive Layouts umzusetzen.

Die Bootstrap 4 und 5 Layouts f├╝r Visforms bieten Ihnen die M├Âglichkeit, die gesamte Palette der Gestaltungsm├Âglichkeiten dieser Frameworks auszusch├Âpfen. Insbesondere kommen mit den Bootstrap 4 und 5 Layouts f├╝r Visforms einige weitere Gestaltungsoptionen f├╝r Ihre Formulare hinzu, die mit den anderen Visforms Layouts nicht zur Verf├╝gung stehen.

Diese sind:

  • Tipp-Text wird als Tooltip ├╝ber dem Control und nicht dem Feldlabel angezeigt.
  • Feldlabel kann f├╝r alle Feldtypen versteckt werden.
  • Captcha Label kann versteckt werden.
  • Bei der Verwendung von mehrseitigen Formularen k├Ânnen die zus├Ątzlichen Buttons, die nur in mehrseitigen Formularen vorhanden sind (Korrektur-Button, Zur├╝ck-Button, Pr├╝fen-Button) mit einer eigenen CSS Klasse versehen werden.
    Das erm├Âglicht ein einfaches Stylen der Buttons.
  • In der Daten-Bearbeiten-Ansicht im Frontend k├Ânnen zus├Ątzliche Buttons, die nur in dieser Ansicht vorhanden sind (Speicher-Button, Abbrechen-Button) mit einer eigenen CSS Klasse versehen werden.
    Das erm├Âglicht ein einfaches Stylen der Buttons.
  • Alle Fehlermeldungen werden nicht als Popup angezeigt, sondern unterhalb des Eingabefeldes.

Bootstrap 4 Layouts aktivieren

  • Gehen Sie in der Formularkonfiguration auf den Reiter “Erweitert”.
  • Unter der Zwischen├╝berschrift “Layout” finden Sie die Option “UI Framework”.
  • W├Ąhlen Sie dort den Wert “Bootstrap 4” aus.
Bootstrap 4 Layouts

Anschlie├čend wird Ihnen eine neue Option “Sublayout” angezeigt, in der Sie zwischen 3 Ausf├╝hrungen des Bootstrap 4 Layouts w├Ąhlen k├Ânnen:

  • Gestapelt
  • Horizontal
  • Individuell
Bootstrap 4 Sublayouts

Boostrap 5 Layouts aktivieren

  • Gehen Sie in der Formularkonfiguration auf den Reiter “Erweitert”.
  • Unter der Zwischen├╝berschrift “Layout” finden Sie die Option “UI Framework”.
  • W├Ąhlen Sie dort den Wert “Bootstrap 5” aus.
Bootstrap 4 Sublayouts

Anschlie├čend wird Ihnen eine neue Option “Sublayout” angezeigt, in der Sie zwischen 3 Ausf├╝hrungen des Bootstrap 5 Layouts w├Ąhlen k├Ânnen:

  • Gestapelt
  • Horizontal
  • Individuell
Bootstrap 5 Sublayouts

Gestapelt Layout

In dieser Layout-Ausf├╝hrung von Bootstrap 4/5 wird das Feldlabel in einer Zeile oberhalb des Eingabefeldes angezeigt. Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt. Benutzerdefinierte Texte k├Ânnen oberhalb des Labels, zwischen Label und Eingabefeld oder unterhalb des Eingabefeldes angezeigt werden. Falls eine Fehlermeldung vorhanden ist, steht der benutzerdefinierte Texte unterhalb der Fehlermeldung. Das Feldlabel kann auch komplett unterdr├╝ckt werden.

Horizontal Layout

In dieser Layout-Ausf├╝hrung von Bootstrap 4/5 wird das Feldlabel in einer Zeile zusammen mit dem Eingabefeld angezeigt. Hierbei erh├Ąlt das Label ein 1/4 und das Eingabefeld 3/4 des zur Verf├╝gung stehenden Platzes. Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt. Benutzerdefinierte Texte k├Ânnen oberhalb oder unterhalb des Eingabefeldes angezeigt werden. Falls eine Fehlermeldung vorhanden ist, steht der benutzerdefinierte Text unterhalb der Fehlermeldung. Die Anzeige des Feldlabels kann auch unterdr├╝ckt werden. Der f├╝r das Label bereitgestellt Platz bleibt in diesem Fall leer.

Individuell Layout

Das individuelle Layout ist sehr wandlungsf├Ąhig. Es erm├Âglicht Ihnen flexibel Formulare mit sehr gutem responsivem Verhalten zu erstellen. Wenn Sie die individuelle Layout-Ausf├╝hrung des Bootstrap 4/5 w├Ąhlen, k├Ânnen Sie nicht nur Feldlabel verstecken. Sie k├Ânnen auch den Platz entfernen, der im horizontalen Layout f├╝r das Label reserviert ist. Das Eingabefeld wird dann ganz links angezeigt.

Insbesondere k├Ânnen Sie festlegen:

  • Wie breit das gesamte Formularfeld relativ zur vorhandenen Bildschirmbreite ist.
    Das gesamte Formularfeld umfasst Label, Eingabefeld, Benutzerdefiniertem Text und Fehlermeldung.
    Dies steuert indirekt, wie viele Felder nebeneinander in einer Reihe angezeigt werden.
  • Wie viel Platz das Feldlabel innerhalb des Raums einnimmt, der dem gesamten Feld zugeteilt wurde.
    Genauer ist damit gemeint, wie breit das Feldlabel im Verh├Ąltnis zu dem gesamten Feld prozentual ist.

Hierbei haben Sie die M├Âglichkeit f├╝r unterschiedliche Device-Gr├Â├čen, unterschiedliche Vorgaben zu machen.

Damit k├Ânnen Sie etwa folgende Unterschiede erzeugen

  • auf einem gro├čen Desktop 3 Felder nebeneinander anzeigen,
  • auf einem mobilen Tablett 2 und
  • auf einem mobilen Smartphone nur ein Feld pro Reihe.

Diese M├Âglichkeiten ergeben sich automatisch aus der Art und Weise, wie Bootstrap 4/5 das responsive Verhalten implementiert.

Bootstrap 5 Sublayouts

Weiterhin k├Ânnen Sie allein durch entsprechende Wahl der prozentualen Breite f├╝r das Feldlabel f├╝r jedes Feld individuell folgendes steuern.

  • Wird das Label in einer Zeile mit dem Eingabefeld angezeigt, oder
  • erscheint das Label oberhalb des Eingabefeldes.

Vergeben Sie für die Feldlabel-Breite einen Wert, der weniger als 100 % der zur Verfügung stehenden Breite entspricht. Dann wird die Breite des Eingabefeldes so berechnet, dass Label und Eingabefeld zusammen die gesamte Breite ausfüllen.

Vergeben Sie für die Feldlabel-Breite einen Wert, der 100 % der zur Verfügung stehenden Breite entspricht. Dann wird das Eingabefeld unterhalb des Labels platziert.

Bootstrap 5 Sublayouts

Benutzerdefinierte Texte und Fehlermeldungen werden immer linksb├╝ndig mit dem Eingabefeld angezeigt. Dies l├Ąsst das Formular immer ordentlich ausgerichtet aussehen.

Sie finden direkt in der Feldkonfiguration ausf├╝hrliche Erl├Ąuterungen zu allen Optionen, mit denen Sie im individuellen Layout ein in h├Âchstem Ma├če responsives Formular erstellen k├Ânnen.

CSS Klassen f├╝r Button vergeben

Bootstrap 4/5 kennt spezielle CSS Klassen, um Buttons zu formatieren:

  • btn-primary,
  • btn-secondary,
  • btn-success,
  • btn-info,
  • btn-warning,
  • btn-danger und
  • btn-light.

Standardm├Ą├čig f├╝gt Visforms den Buttons sinnvolle CSS Klassen hinzu, damit diese farblich gestaltet werden. Wenn Ihnen diese Farben nicht gefallen oder wenn die entsprechenden Klassen im CSS Ihres Templates nicht implementiert sind, haben Sie die folgende einfache M├Âglichkeit der Anpassung.

Verwenden Sie folgende CSS-Klassen Optionen, um die jeweiligen Buttons nach Ihren W├╝nschen frei zu gestalten:

  • in der Formularkonfiguration oder
  • in der Feldkonfiguration f├╝r Felder vom Type “Submit” oder “Reset”.

Bootstrap 4 CSS f├╝r Formulare laden

Prinzipiell bietet Ihnen Visforms auch die M├Âglichkeit, das Bootstrap 4 Standard CSS separat hinzuzuladen. Aktivieren Sie hierzu die Option “Bootstrap CSS f├╝r Formulare laden”.

Dies kann etwa dann interessant sein, wenn Sie ein Template verwenden, das ├╝berhaupt kein Bootstrap CSS verwendet. Problematisch wird es, wenn Ihr Template aber eine ├Ąltere (Bootstrap 2 oder 3) oder neuere (Bootstrap 5) Version des Bootstrap CSS implementiert. Dann kommt es vermutlich zu Inkompatibilit├Ąten zwischen dem CSS Ihres Templates und dem Bootstrap 4 CSS.

Dies f├╝hrt dann in der Regel zu einer nur wenig befriedigenden Anzeige der Formulare. W├Ąhlen Sie in diesem Fall das UI-Framework in der Formularkonfiguration aus, das zu Ihrem Template passt.