Bootstrap Setup - Revision history

PeterRobert at 08:31, 2 November 2024

2024-11-02T08:31:37Z

2024-11-02T08:30:46Z

2024-11-02T08:28:53Z

2024-11-02T08:27:50Z

2024-11-02T08:22:15Z

2024-11-02T08:14:28Z

2024-11-01T11:47:26Z

2024-11-01T11:29:03Z

2024-11-01T11:24:43Z

2024-11-01T11:19:49Z

@@ Line 29: / Line 29: @@
 Generally, not specifically, it can be helpful to think of these breakpoints like:
-*Extra Small <576px &rarr; mobile phones in portrait mode.
+*Extra Small <576px = mobile phones in portrait mode.
-*Small ≥576px &rarr; mobile phones in landscape mode, larger phones, smaller tablets in portrait mode.
+*Small ≥576px = mobile phones in landscape mode, larger phones, smaller tablets in portrait mode.
-*Medium ≥768px &rarr; tablets in portrait mode.
+*Medium ≥768px = tablets in portrait mode.
-*Large ≥992px &rarr; smaller desktops or laptops, tablets in landscape mode.
+*Large ≥992px = smaller desktops or laptops, tablets in landscape mode.
-*Extra Large ≥1200px &rarr; desktops or laptops.
+*Extra Large ≥1200px = desktops or laptops.
-*Extra Extra Large ≥1400px &rarr; large laptops, large external monitors.
+*Extra Extra Large ≥1400px = large laptops, large external monitors.

@@ Line 29: / Line 29: @@
 Generally, not specifically, it can be helpful to think of these breakpoints like:
-*Extra Small <576px = mobile phones in portrait mode.
+*Extra Small <576px &rarr; mobile phones in portrait mode.
-*Small ≥576px = mobile phones in landscape mode, larger phones, smaller tablets in portrait mode.
+*Small ≥576px &rarr; mobile phones in landscape mode, larger phones, smaller tablets in portrait mode.
-*Medium ≥768px = tablets in portrait mode.
+*Medium ≥768px &rarr; tablets in portrait mode.
-*Large ≥992px = smaller desktops or laptops, tablets in landscape mode.
+*Large ≥992px &rarr; smaller desktops or laptops, tablets in landscape mode.
-*Extra Large ≥1200px = desktops or laptops.
+*Extra Large ≥1200px &rarr; desktops or laptops.
-*Extra Extra Large ≥1400px = large laptops, large external monitors.
+*Extra Extra Large ≥1400px &rarr; large laptops, large external monitors.

@@ Line 21: / Line 21: @@
 [[File:bootstrapsetup2.jpg|link=|1500px]]
 </div>
 ==='''Bootstrap Breakpoints'''===

← Older revision		Revision as of 08:27, 2 November 2024
Line 28:		Line 28:
	These settings change the behaviour according to the device screen width, described as '''breakpoints''' in the first row, as per this table.		These settings change the behaviour according to the device screen width, described as '''breakpoints''' in the first row, as per this table.

−	Generally, not specifically, it can be ~~useful~~ to think of these breakpoints like:	+	Generally, not specifically, it can be helpful to think of these breakpoints like:
−

		+	*Extra Small <576px = mobile phones in portrait mode.
		+	*Small ≥576px = mobile phones in landscape mode, larger phones, smaller tablets in portrait mode.
		+	*Medium ≥768px = tablets in portrait mode.
		+	*Large ≥992px = smaller desktops or laptops, tablets in landscape mode.
		+	*Extra Large ≥1200px = desktops or laptops.
		+	*Extra Extra Large ≥1400px = large laptops, large external monitors.

← Older revision		Revision as of 08:22, 2 November 2024
Line 23:		Line 23:


−	CE Phoenix Cart is set with '''container-xl''' as default which displays the page width according the device screen width.	+	==='''Bootstrap Breakpoints'''===
−	These settings change the behaviour as per this table.	+	CE Phoenix Cart is set with '''container-xl''' as default which displays the page width according to the device screen width.
		+
		+	These settings change the behaviour according to the device screen width, described as '''breakpoints''' in the first row, as per this table.
		+
		+	Generally, not specifically, it can be useful to think of these breakpoints like:
		+
		+

@@ Line 21: / Line 21: @@
 [[File:bootstrapsetup2.jpg|link=|1500px]]
 </div>
 CE Phoenix Cart is set with '''container-xl''' as default which displays the page width according the device screen width.
 These settings change the behaviour as per this table.
 <div class="mainpage_box">

← Older revision		Revision as of 11:47, 1 November 2024
Line 55:		Line 55:
	</div>		</div>

		+	This setting is only used if bootstrap5 template is set in '''Configuration → My Store → Template Selection'''.

		+	This is set to '''auto''' which allows the theme to automatically switch between modes based on the user's system preferences.
		+
		+	Set to '''dark''' or '''light''' will fix and the keep the mode unchanged.
		+
		+	'''light''' is the default appearance of the store.
		+
		+	'''dark''' would make the store appear like this:
		+
		+	<div class="mainpage_box">
		+	[[File:dark-mode.jpg\|link=\|1500px]]
		+	</div>

	<hr>		<hr>

@@ Line 45: / Line 45: @@
-<div class="mainpage_box">
+----
-[[File:shop.png|link=|1500px]]
+==='''Bootstrap Theme'''===
-For example, changing the setting to '''container''' and removing the side boxes gives this result.
+*Click '''Bootstrap Theme'''
 <div class="mainpage_box">
-[[File:container.png|link=|1500px]]
+[[File:bootstraptheme.jpg|link=|1500px]]
 </div>

@@ Line 39: / Line 39: @@
 [[File:bootstrapsetup1.jpg|link=|1500px]]
 </div>
 As indicated in the edit options, changing the setting from '''8''' will reduce the width of the page content whilst increasing the width of the side Box Modules.

@@ Line 31: / Line 31: @@
 ----
-==='''Bootstrap Container'''===
+==='''Bootstrap Content'''===
-*Click '''Bootstrap Container'''
+*Click '''Bootstrap Content'''
 *Click <span class="btn-yellow">Edit</span> to see this:
 <div class="mainpage_box">
-[[File:bootstrapsetup1.png|link=|1500px]]
+[[File:bootstrapsetup1.jpg|link=|1500px]]
 </div>