Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
software:tim:smartform-example
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
|
software:tim:smartform-example [2019/04/15 10:40] Semen Bortnik |
software:tim:smartform-example [2021/07/01 09:52] |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== 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. | ||
| - | <code> | ||
| - | <form class="form-quickstart" data-bootstrap="true" validationMethod="validateQuickstart" initMethod="initQuickstart"> </form> | ||
| - | </code> | ||
| - | |||
| - | ==== 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> | ||
software/tim/smartform-example.txt · Zuletzt geändert: 2021/07/01 09:52 (Externe Bearbeitung)
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: 2013 T!M Solutions GmbH
