Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
en:software:tim:smartform-example
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:software:tim:smartform-example [2019/04/15 11:30] Semen Bortnik created |
en:software:tim:smartform-example [2021/07/01 09:52] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | FIXME **This page is not fully translated, yet. Please help completing the translation.** \\ | ||
| - | //(remove this paragraph once the translation is finished)// | ||
| ====== Bootstrap Example ====== | ====== Bootstrap Example ====== | ||
| - | ==== 1. Integrate Bootstrap ==== | + | ==== 1. Integrate Bootstrap ==== |
| In order to use Bootstrap in a smartform, one has to load the framework's artifacts from TIM. This can be done by adding ''data-bootstrap="true"'' to the ''<form>''-Tag. | In order to use Bootstrap in a smartform, one has to load the framework's artifacts from TIM. This can be done by adding ''data-bootstrap="true"'' to the ''<form>''-Tag. | ||
| Line 12: | Line 10: | ||
| ==== 2. Structuring a smartform using Bootstrap ==== | ==== 2. Structuring a smartform using Bootstrap ==== | ||
| - | Bootstrap devides the user's screen into rows and cols, which adapt to the current display's width and height. This is the reason why a structure of rows and cols is created in the first place and is filled with input-fields etc. afterwards. They get the class ''form-control'', which causes them to adapt the width and height of their parent element. The screens width is 12 columns. A cell can be 1-12 columns wide, the desired width can be stated using integers from 1 to 12: ''class="col-md-CHANGEME"''. A recommended heuristic is to create a Div that will be used as a container first, then create rows and afterwards cells inside the rows, which are x columns wide. Should a more precise structure be required, one can create nested cells. Since a cell gets it's width from the parent element, a nested cell's 12 rows equal 100% of the parent cells width.\\ | + | Bootstrap devides the user's screen into rows and cols, which adapt to the current display's width and height. This is the reason why a structure of rows and cols is created in the first place and is filled with input-fields etc. afterwards. They get the class ''form-control'', which causes them to adapt the width and height of their parent element. The screens width is 12 columns. A cell can be 1-12 columns wide, the desired width can be stated using integers from 1 to 12: ''class="col-md-CHANGEME"''. A recommended heuristic is to create a Div that will be used as a container first, then create rows and afterwards cells inside the rows, which are x columns wide. Should a more precise structure be required, one can create nested cells. Since a cell gets it's width from the parent element, a nested cell's 12 rows equal 100% of the parent cells width.\\ |
| Some elements, e.g. textareas one can use the ''rows="CHANGEME"'' parameter in order to modify the element's height. The parameter expects an integer.\\ | Some elements, e.g. textareas one can use the ''rows="CHANGEME"'' parameter in order to modify the element's height. The parameter expects an integer.\\ | ||
| - | If one needs to customize the design for certain screensizes, then elements can receive multiple widths. Bootstrap differentiates between xs, sm, md, lg. They mean extra small (e.G: smartphone), small (e.G: tablet), medium (e.G: monitor), and large (e.G: large monitor). A common strategy is to maximize a field's width on smartphones while keeping the label and the inputfield in one line on bigger screens. To achieve this a cell gets two widths: One with and one with | + | If one needs to customize the design for certain screensizes, then elements can receive multiple widths. Bootstrap differentiates between xs, sm, md, lg. They mean extra small (e.G: smartphone), small (e.G: tablet), medium (e.G: monitor), and large (e.G: large monitor). A common strategy is to maximize a field's width on smartphones while keeping the label and the inputfield in one line on bigger screens. To achieve this a cell gets two widths: One with ''xs'' and one with ''md''. The former is used if the screen is small and the latter is used if the screen is medium and/or bigger. |
| - | + | ||
| - | dafür werden den jeweiligen Zellen zusätzlich Breitenangaben mit ''xs'' statt ''md'' mitgegeben. Diese schreiben vor, dass bei einem kleinen Bildschirm die Zellen 12 Spalten, also 100% der verfügbaren Breite ausnutzen. | + | |
| <code> | <code> | ||
| <div class="container"> | <div class="container"> | ||
en/software/tim/smartform-example.1555320609.txt.gz · Last modified: 2021/07/01 09:55 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: 2013 T!M Solutions GmbH
