Differences

This shows you the differences between two versions of the page.

--- mistudiobootstraplayoutguide [2021/12/15 14:16]
wikiadmin [Example Dashboard]
+++ mistudiobootstraplayoutguide [2021/12/15 16:04] (current)
wikiadmin [Dashboard Layout]
@@ Line 9: / Line 9: @@
 {{:pasted:20211215-140241.png?maxwidth=300}}
-Each application can be organized into a single "Dashboard" using the BootstrapConifg configuration, for example as a concept:
+Each application can be organized into a single "Dashboard" using the BootstrapConifg configuration, for example, as a visual concept this layout:
 {{:pasted:20211215-141533.png?maxwidth=300}}
@@ Line 30: / Line 30: @@
 {{:pasted:20211215-104523.png?maxwidth=300}}
+For the layout concept above, the header, footer and Main panels are each 1200 wide, and the four summary panels are 300 wide (for a total of 1200). The height of all the summary panels is the same (300).
-====Dashboard Example====
+====Dashboard Layout====
+Using the visual concept above, with the header on top, followed by the four summary panels, the main panel, and then the footer, the BootstrapConfig can be used to lay out this design.
+To start the bootstrap dashboard configuration, click on the property field "BootstrapConfig" on the project properties panel.
+{{:pasted:20211215-144317.png?maxwidth=487}}
+The new Bootstrap Layout panel looks like:
+{{:pasted:20211215-144951.png?size=609}}
+The layout is designed from the top down (top of screen first). When you start, there is one row in the layout. Select the Application "Header" to occupy this row.
+{{:pasted:20211215-151618.png?size=612}}
+The Header is set up to use the default "12" column units.
+Next, add a row to the layout using the + button as shown below:
+{{:pasted:20211215-152648.png?size=640}}
+The next row is composed of the four "Summary" panels. You can select the first one, SummaryOne, for this column, and change it to use 3 of the 12 column units.
+{{:pasted:20211215-155128.png?size=320}}
+When you change the column units from "12" to "3" a "+" appears on the left side of the selected panel. This means you can add more panels to this row. Press the "+" to add another panel, SummaryTwo, set its column units to 3, and repeat for SummaryThree and Summary Four. Once SummaryFour is added and set to use the remaining three column units, this row is complete. There will be a "-" in this section to remove panels if desired.
+{{:pasted:20211215-155837.png?size=617}}
+To finish the layout add another row and select the Main panel for this, and finally add another row for the Footer panel.
+Using the Preview button, you can view the general layout in the preview panel (the row heights are not to scale).
+{{:pasted:20211215-160322.png?size=803}}