Differences

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

--- mistudiobootstraplayoutguide [2021/12/15 14:44]
wikiadmin [Dashboard Example]
+++ mistudiobootstraplayoutguide [2021/12/15 16:04] (current)
wikiadmin [Dashboard Layout]
@@ Line 33: / Line 33: @@
-====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.
@@ Line 39: / Line 39: @@
 To start the bootstrap dashboard configuration, click on the property field "BootstrapConfig" on the project properties panel.
-{{:pasted:20211215-144317.png?maxwidth=500}}
+{{: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}}