Bootstrap Entwicklungsbeispiel

1. Bootstrap einbinden

Um eine Smartform mit Hilfe des Bootstrap-Frameworks zu gestalten, muss die in TIM gespeicherte Version erst geladen werden. Dazu muss im <form>-Tag data-bootstrap=„true“ eingetragen werden.

<form class="form-quickstart" data-bootstrap="true" validationMethod="validateQuickstart" initMethod="initQuickstart"> </form>

2. Smartform mit Bootstrap strukturieren

Bootstrap unterteilt den Bildschirm in Reihen (rows) und Spalten (cols), welche sich dynamisch an die jeweilige Bildschirmgröße des Anwenders anpassen. Deshalb wird bei der Smartform-Entwicklung mit Bootstrap zuerst eine Struktur aus rows und cols geschaffen, in die Anschließend Formularfelder abgelegt werden. Diese werden mit der Klasse form-control versehen, wodurch sich die Dimensionen des jeweiligen Feldes an sein Parent-Element anpassen. Die Breite des Bildschirms wird in 12 Spalten unterteilt. Eine Zelle kann von 1 bis 12 Spalten breit sein, die gewünschte Breite kann in der Klasse des Divs festgelegt werden als Zahl von 1-12: class=„col-md-ERSETZMICH“. Es wird empfohlen, ein formularübergreifendes Div als Container zu benutzen, darin Reihen (row) anzulegen in welchen man Zellen schafft, die x Spalten (col) breit sind. Sollte eine feinere Strukturierung notwendig sein, können Zellen in Zellen geschaffen werden. Falls dies passiert, bezieht sich die Spaltenanzahl der children-Zellen auf die breite der parent-Zelle. So hätte z.B. eine 12 Spalten breite child-Zelle 100% der Breite der parent-Zelle. Manche Elemente, z.B. Textareas können den Parameter rows=„ERSETZMICH“ erhalten. Die übergebene Zahl bestimmt dabei, über wie viele Reihen (row) sich die Höhe des Elements erstreckt.

<div class="container">
<div class="row">
<div class="col-md-3">
<label class="control-label" for="group">Warengruppe:</label>
</div>
<div class="col-md-9">
<input type="text" name="productGroup" placeholder="Warengruppe" id="group" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label class="control-label" for="comment">Kommentar:</label>
</div>
<div class="col-md-9">
<textarea rows="3" id="comment" class="form-control"/>
</div>
</div>
</div>