Bootstrap Grids - Revision history

Ghenne: /* Filling a column */

2016-06-13T22:07:48Z

Filling a column

← Older revision		Revision as of 22:07, 13 June 2016
Line 59:		Line 59:

	[[File:Bootstrapgridchildren.png]]		[[File:Bootstrapgridchildren.png]]
	.
			=== Nested Grids ===

			You can even put a grid inside a grid. In this example, we have GridRow, which contains two GridColumns (GridColomn5 and GridColumn6).

			Inside GridColumn6, we have GridRow2. GridRow2 has two columns: GridColumn1 and GridColumn2.

			[[File:Gridngrid.png]]

2016-06-13T20:58:55Z

AppStudio GridColumn

← Older revision		Revision as of 20:58, 13 June 2016
Line 53:		Line 53:

	Create GridColumns as you would any control in AppStudio, and set them as a child of your GridRow.		Create GridColumns as you would any control in AppStudio, and set them as a child of your GridRow.

			=== Filling a column ===

			You can put any kind of AppStudio control into a GridColumn container. In the following, we have a GridRow with two GridColumns. Column A has a [[Label]] and a [[Panel (Bootstrap)\|Panel]]. Column B has a [[Header]] and [[Radiobutton (Bootstrap)\|RadioButton]]

			[[File:Bootstrapgridchildren.png]]
			.

2016-06-13T20:14:01Z

Columns

← Older revision		Revision as of 20:14, 13 June 2016
Line 36:		Line 36:

	In this image, you can see how 1, 2, 3 and 4 columns appear in the Design Screen. Notice how the Project Explorer shows the GridColumns as children of the GridRows.		In this image, you can see how 1, 2, 3 and 4 columns appear in the Design Screen. Notice how the Project Explorer shows the GridColumns as children of the GridRows.


	[[File:Bootstrapgridcolumns.png]]		[[File:Bootstrapgridcolumns.png]]

2016-06-13T20:13:51Z

Columns

← Older revision		Revision as of 20:13, 13 June 2016
Line 34:		Line 34:

	If the screen is not wide enough to display the columns, they will wrap.		If the screen is not wide enough to display the columns, they will wrap.

			In this image, you can see how 1, 2, 3 and 4 columns appear in the Design Screen. Notice how the Project Explorer shows the GridColumns as children of the GridRows.

	[[File:Bootstrapgridcolumns.png]]		[[File:Bootstrapgridcolumns.png]]

2016-06-13T20:12:21Z

Columns

← Older revision		Revision as of 20:12, 13 June 2016
Line 35:		Line 35:
	If the screen is not wide enough to display the columns, they will wrap.		If the screen is not wide enough to display the columns, they will wrap.

	~~(put a screen shot here)~~.		[[File:Bootstrapgridcolumns.png]]

	=== AppStudio GridRow ===		=== AppStudio GridRow ===

2016-06-11T21:01:44Z

← Older revision		Revision as of 21:01, 11 June 2016
Line 42:		Line 42:

	Calling them "Grids" is a bit optimistic. For our purposes, Grids have just one row, which you create using a [[GridRow (Bootstrap)\|GridRow]] control. If you need more than one row, use another GridRow. GridRows are pretty simple: their only job is to act as a container for [[GridColumn (Bootstrap)\|GridColumn]] controls.		Calling them "Grids" is a bit optimistic. For our purposes, Grids have just one row, which you create using a [[GridRow (Bootstrap)\|GridRow]] control. If you need more than one row, use another GridRow. GridRows are pretty simple: their only job is to act as a container for [[GridColumn (Bootstrap)\|GridColumn]] controls.

			GridRows are created just like any other control in AppStudio: just drag from the Toolbox onto the Design Screen.

	=== AppStudio GridColumn ===		=== AppStudio GridColumn ===

2016-06-11T21:00:51Z

AppStudio GridColumn

← Older revision		Revision as of 21:00, 11 June 2016
Line 46:		Line 46:

	[[GridColumn (Bootstrap)\|GridColumns]] are almost as simple. Their main job is to act as containers for the contents of the row and column. Their only special properties are size: the number of sections xs, sm, md and lg sized screens will have.		[[GridColumn (Bootstrap)\|GridColumns]] are almost as simple. Their main job is to act as containers for the contents of the row and column. Their only special properties are size: the number of sections xs, sm, md and lg sized screens will have.

			Create GridColumns as you would any control in AppStudio, and set them as a child of your GridRow.

2016-06-11T20:58:05Z

Screen Sizes

← Older revision		Revision as of 20:58, 11 June 2016
Line 10:		Line 10:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	! Name !! Description !! Screen ~~with~~ Width (pixel)		! Name !! Description !! Screen up to Width (pixel)
	\|-		\|-
	\| xs \|\| Extra Small \|\| <768		\| xs \|\| Extra Small \|\| 768
	\|-		\|-
	\| sm \|\| Small \|\| <992		\| sm \|\| Small \|\| 992
	\|-		\|-
	\| md \|\| Medium \|\| <1200		\| md \|\| Medium \|\| 1200
	\|-		\|-
	\| lg \|\| Large \|\| 1200+		\| lg \|\| Large \|\| 1200+

2016-06-11T20:57:41Z

Screen Sizes

2016-06-11T20:56:07Z

Columns

← Older revision		Revision as of 20:56, 11 June 2016
Line 30:		Line 30:
	* A Large screen could have 4 columns, each 3 sections wide.		* A Large screen could have 4 columns, each 3 sections wide.
	Notice that in each case, the total of all the rows adds up to 12. (You can also have columns of unequal width: just make sure they still add up to 12.)		Notice that in each case, the total of all the rows adds up to 12. (You can also have columns of unequal width: just make sure they still add up to 12.)

			Bootstrap columns are completely responsive: they adjust automatically in width depending on the container they are in.

			If the screen is not wide enough to display the columns, they will wrap.

			(put a screen shot here).

			=== AppStudio GridRow ===

			Now we know enough to create our own grid in AppStudio.

			Calling them "Grids" is a bit optimistic. For our purposes, Grids have just one row, which you create using a [[GridRow (Bootstrap)\|GridRow]] control. If you need more than one row, use another GridRow. GridRows are pretty simple: their only job is to act as a container for [[GridColumn (Bootstrap)\|GridColumn]] controls.

			=== AppStudio GridColumn ===

			[[GridColumn (Bootstrap)\|GridColumns]] are almost as simple. Their main job is to act as containers for the contents of the row and column. Their only special properties are size: the number of sections xs, sm, md and lg sized screens will have.