Bootstrap 3

Mehrspaltiges Layout f├╝r Bootstrap 3 aufsetzen

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

Hinweis: Das mehrspaltige Formular Layout setzt auf das Bootstrap 3 Grid auf. Sie k├Ânnen dieses Layout daher nur verwenden, wenn Ihre Webseite ein Template hat, welches das Bootstrap 3 Grid umsetzt.

Grundlagen

Das Bootstrap 3 Grid unterteilt die Webseite in Zeilen und jede Zeile in 1 - 12 Spalten.

Layout wird reihenweise erzeugt

Dies bedeutet, dass das Layout letztlich Reihenweise erzeugt wird. Jede Reihe wird dann in Spalten unterteilt, die jeweils ein Formularfeld bestehend aus Label und Control enthalten. Die Spalten sind Container, die das Label und das Control enthalten.

In einem zweispaltigen Layout wird der Container f├╝r das 1. Formularfeld in der 1. Zeile in der linken Spalte angezeigt, der Container f├╝r das 2. Formularfeld in der 1. Zeile in der rechten Spalte. Der Container f├╝r das 3. Formularfeld steht in der zweiten Zeile links, und der Container f├╝r das 4. Feld in der zweiten Zeile rechts - und so weiter. F├╝r jede Zeile haben Sie die M├Âglichkeit festzulegen, wie viele Spalten diese enthalten soll. Dies ergibt insgesamt ein extrem flexibles System.

Feld-Container im Grid System

Bootstrap 2 und 3 Grid System

Sie k├Ânnen das mehrspaltige Bootstrap 3 Layout verwenden, um das Design mehrspaltiger Formulare individuell zu konfigurieren. In diesem Fall sollten Sie sich allerdings mit dem Bootstrap Grid System wirklich gut auskennen. Mehr dazu in: Bootstrap Grid System .

Das mehrspaltige Layout ist responsive und verwendet die col-sm-* Klassen. Mit ihnen werden auf kleinen Ger├Ąten die Formularfelder automatisch untereinander und nicht mehrspaltig angezeigt.

F├╝r welche Formulare eignet sich das mehrspaltige Layout?

Das mehrspaltige Bootstrap 3 Layout eignet sich gut dazu, Formulare zu erstellen, die vor allem Text Input Felder (Feldtypen: Text, E-Mail, Passwort, URL, Zahl) verwenden.

Besonders gut sieht das Design aus, wenn Sie bei diesen Feldern die “Label Optionen” auf “Label verstecken” setzen. Das Label wird dann als Platzhalter im Input angezeigt und verschwindet, wenn der Benutzer anf├Ąngt Eingaben zu machen.

Auch Checkboxen, Listboxen, File Uploads und Textareas passen sich recht gut in das mehrspaltige Layout ein.

Bei Feldern vom Typ Radiobutton oder Checkbox Gruppe kommt das mehrspaltige Layout schnell an seine Grenze. Allerdings k├Ânnen diese meist mit etwas Geschick auch verwendet werden.

Je einheitlicher das Formular, desto besser sieht es im mehrspaltigen Layout aus.

F├╝r welche Formulare eignet sich das mehrspaltige Layout nicht?

Das mehrspaltige Layout funktioniert nicht mit Formularen, die “Bedingte Felder” enthalten. Denn das Ein- und Ausblenden der bedingten Felder wirft das Layout v├Âllig durcheinander. Mehrspaltige Formulare mit bedingten Feldern zu erstellen erfordert Fingerspitzengef├╝hl und viel individuelle Feinjustierung.

Felder mit und Felder ohne Label gleichzeitig innerhalb einer Zeile zu haben, f├╝hrt zu einem uneinheitlichen Layout.

Texte im Formular (benutzerdefinierte Texte der Felder) f├╝hren schnell dazu, dass das mehrspaltige Layout nicht mehr gut aussieht. Ebenso sind Radiobutton und Checkbox Gruppen mit vielen Optionen schwer einzupassen.

Auch f├╝r die Darstellung von Formularen in Modulen ist das mehrspaltige Layout wenig geeignet. Dies, weil die Module in der Regel zu schmal sind.

Hinweis: Bitte beachten Sie, dass sich nicht jedes Formular sinnvoll mehrspaltig darstellen l├Ąsst. Das mehrspaltige Layout kann bei schlechter Konfiguration und/oder unpassenden Feldern einfach "zerbrechen". Sie m├╝ssen es einfach mal ausprobieren, ob es f├╝r ein konkretes Formular gut funktioniert.

Ein einfaches zweispaltiges Formular

Gehen Sie in der Formularkonfiguration auf den Reiter “Erweitert”. Unter der Zwischen├╝berschrift “Layout” finden Sie die Option “UI Framework”. Stellen Sie diese auf “Bootstrap 3”.

Bootstrap 3 Framework Auswahl

Anschlie├čend wird eine Listbox zur Auswahl des “Sublayouts” sichtbar. Stellen Sie die Option “Sublayouts” auf “Individuell”.

Individuelles Sublayout

Allein durch diese Einstellung erreichen Sie, dass nun zwei Formularfelder pro Zeile angezeigt werden. Die beiden Spalten haben die gleiche Breite. Innerhalb des Containers, der ein Feld enth├Ąlt, wird das Label oberhalb des Controls angezeigt. Sie haben also innerhalb des Containers eine zweizeilige Darstellung. Haben Sie die Anzeige des Feld-Labels deaktiviert, f├╝llt das Feld den Container einzeilig in ganzer Breite aus.

Die Anzahl der Felder pro Spalte bestimmen

Sie k├Ânnen f├╝r jedes Feld festlegen, wie viel Platz ihm innerhalb einer Zeile zugewiesen wird.

Einem Feld Einheiten pro Zeile zuweisen

Gehen Sie hierzu in die Feldkonfiguration auf den Reiter “Erweitert”. Hier finden Sie einen Parameter “Breite”. W├Ąhlen Sie aus der Listbox einen Wert zwischen 1 und 12 aus. Dieser Wert entspricht der Anzahl an Einheiten, die diesem Feld in seiner Zeile zugewiesen werden. Da jede Zeile aus 12 Einheiten besteht bedeutet dies, dass das Feld bei einem Wert von 4 1/3 der Zeile einnimmt, bei einem Wert von 6 die H├Ąlfte der Zeile bei einem Wert von 12 die ganze Zeile.

Individuelle Spaltenanzahl

Zeile nicht immer ganz gef├╝llt

Visforms berechnet automatisch f├╝r jedes Feld, ob es aufgrund seiner gew├Ąhlten Breite noch in die aktuelle Zeile passt oder nicht. Passt es nicht mehr hinein, wird automatisch eine neue Zeile angefangen. Es ist also auch m├Âglich, dass eine Zeile aufgrund der gew├Ąhlten Feld-Breiten, nicht vollst├Ąndig gef├╝llt wird.

Hier ein Beispiel:
Feld1 hat Breite 5, Feld2 hat Breite 5, Feld3 hat Breite 3.
Feld 3 wird folglich in eine neue Zeile geschrieben (13 = 5 + 5 + 3 > 12).
In der 1. Zeile sind daher nur 10 von 12 Einheiten gef├╝llt.

Pflichtfelder und der Asterix

Pflichtfelder werden im Formular gerne mit einem Asterix (dem Stern *) gekennzeichnet. Der Umgang mit diesem Pflichtfeld-Stern ist im mehrspaltigen Bootstrap 3 Layout leider etwas schwierig.

Falls das Label sichtbar ist, wird im mehrspaltigen Layout der Pflichtfeld-Stern gerne an das Feld-Label angeh├Ąngt. Haben Sie die Feldoption “Label verstecken” gew├Ąhlt, dann wird der Pflichtfeld-Stern rechts oberhalb des Controls angezeigt. Der Pflichtfeld-Stern f├╝hrt dazu, dass das Feld insgesamt in der H├Âhe genauso viel Platz einnimmt wie ein Feld mit Label.

Visforms bietet Ihnen auch die M├Âglichkeit auf die Anzeige des Pflichtfeld-Sternes ganz zu verzichten. Selbstverst├Ąndlich wird trotzdem gepr├╝ft, dass ein Pflichtfeld einen Wert enth├Ąlt. Sie m├╝ssen im Detail f├╝r Ihr konkretes Formular ausprobieren, welche Einstellungen das beste und auch das am besten aussehende Ergebnis liefern.

Die Formular-Buttons

Die Einstellungen f├╝r mehrspaltiges Layout werden f├╝r die Buttons Feld-Typen nicht ausgewertet. Zu den Buttons Feld-Typen geh├Âren die Typen Submit, Reset und Image Submit. Alle Button werden in allen Layouts in einer eigenen Zeile und nebeneinander platziert.