Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung Beide Seiten der Revision | |||
software:tim:smartform-example [2019/04/11 09:05] Semen Bortnik angelegt |
software:tim:smartform-example [2019/04/15 10:40] Semen Bortnik |
||
---|---|---|---|
Zeile 4: | Zeile 4: | ||
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. | 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. | ||
- | <code><form class="form-quickstart" data-bootstrap="true" validationMethod="validateQuickstart" initMethod="initQuickstart"> </form> | + | <code> |
+ | <form class="form-quickstart" data-bootstrap="true" validationMethod="validateQuickstart" initMethod="initQuickstart"> </form> | ||
</code> | </code> | ||
+ | |||
==== 2. Smartform mit Bootstrap strukturieren ==== | ==== 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. | ||
+ | <code><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> | ||
+ | </code> | ||