Differences

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

--- mistudiobootstraplayoutguide [2021/12/15 16:10] – [Dashboard Example] wikiadmin
+++ mistudiobootstraplayoutguide [2021/12/15 17:04] (current) – [Dashboard Layout] wikiadmin
@@ Line 47: / Line 47: @@
 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.
-To begin, add a row to the layout using the + button as shown below:
+Next, add a row to the layout using the + button as shown below:
-{{:pasted:20211215-150730.png?size=595}}
+{{: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}}