Bootstrap - Revision history

Sarjona: This page will not be migrated to new devdocs

2024-05-03T13:57:32Z

This page will not be migrated to new devdocs

← Older revision		Revision as of 13:57, 3 May 2024
Line 1:		Line 1:
			{{Template:WillNotMigrate}}

	{{Themes}}		{{Themes}}

Damyon: /* Bootstrap versions in Moodle */

2016-12-01T06:51:06Z

Bootstrap versions in Moodle

← Older revision		Revision as of 06:51, 1 December 2016
Line 30:		Line 30:
	Boost is the new default theme for Moodle 3.2 and is based on "Bootstrap 4 alpha 4" - we have plans to upgrade to the stable release of Bootstrap 4 when it is released.		Boost is the new default theme for Moodle 3.2 and is based on "Bootstrap 4 alpha 4" - we have plans to upgrade to the stable release of Bootstrap 4 when it is released.

	Which version of ~~bootstrap~~ do I use in my plugins?		Which version of Bootstrap do I use in my plugins?

	As of Moodle 3.2 you should write all your HTML to target Bootstrap 4. We have provided some compatibility between bootstrap versions so for simple things like grids, padding, margins and floats you can use Bootstrap 4 syntax and it will work in Bootstrap 2 based themes. See [https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/bs4-compat.less Bootstrap 4 compatibility] for a list of supported classes.		As of Moodle 3.2 you should write all your HTML to target Bootstrap 4. We have provided some compatibility between bootstrap versions so for simple things like grids, padding, margins and floats you can use Bootstrap 4 syntax and it will work in Bootstrap 2 based themes. See [https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/bs4-compat.less Bootstrap 4 compatibility] for a list of supported classes.

Damyon: /* Bootstrap versions in Moodle */

2016-12-01T06:50:30Z

Bootstrap versions in Moodle

← Older revision		Revision as of 06:50, 1 December 2016
Line 32:		Line 32:
	Which version of bootstrap do I use in my plugins?		Which version of bootstrap do I use in my plugins?

	As of Moodle 3.2 you should write all your HTML to target Bootstrap 4. We have provided some compatibility between bootstrap versions so for simple things like grids, padding, margins and floats you can use ~~bootstrap~~ 4 syntax and it will work in Bootstrap 2 based themes. See [https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/bs4-compat.less Bootstrap 4 compatibility] for a list of supported classes.		As of Moodle 3.2 you should write all your HTML to target Bootstrap 4. We have provided some compatibility between bootstrap versions so for simple things like grids, padding, margins and floats you can use Bootstrap 4 syntax and it will work in Bootstrap 2 based themes. See [https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/bs4-compat.less Bootstrap 4 compatibility] for a list of supported classes.

	== Final Message ==		== Final Message ==

	Every time you add CSS bloat to your plugin styles.css every theme will need to be specifically tested and updated to work with your plugin.		Every time you add CSS bloat to your plugin styles.css every theme will need to be specifically tested and updated to work with your plugin.

Damyon at 06:50, 1 December 2016

2016-12-01T06:50:01Z

← Older revision		Revision as of 06:50, 1 December 2016
Line 1:		Line 1:
	{{Themes}}		{{Themes}}
	~~== Overview ==~~

	This document talks about Bootstrap 4 and the Boost theme available in Moodle 3.2.		This document talks about Bootstrap 4 and the Boost theme available in Moodle 3.2.
Line 6:		Line 5:
	For information about Bootstrap 2 and the older themes based on that version of the framework see [[Bootstrap 2]].		For information about Bootstrap 2 and the older themes based on that version of the framework see [[Bootstrap 2]].

			== Overview ==
			Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.

	~~Bootstrap (~~http://~~getbootstrap.com/2.3.2) is a "sleek, intuitive, and powerful front~~-~~end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.~~		[http://v4-alpha.getbootstrap.com/ Bootstrap 4]

	~~If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too~~.

	~~http://~~getbootstrap.com/~~2.3.2/getting-started.html~~

	A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com (Note that some of these examples may use Bootstrap ~~3. Then the code of these examples won't work on Moodle that uses bootstrap 2.3.2)~~

	~~== Features ==~~

			Moodle 3.2 includes a new default theme "Boost" based on Bootstrap 4.

	~~=== Responsive design ===~~		When styling pages and components in Moodle - it is recommended to always re-use the components from Bootstrap instead of inventing new things that need custom styling. This means that themes extending Boost can re-style the native Bootstrap components and the changes will be reflected in the output across all Moodle pages.

	~~A key feature of~~ Bootstrap ~~is responsive design. This means that the look~~ of the ~~page changes based~~ on the ~~width of your screen~~ and ~~allows you to alter the presentation so that iPhones, iPads, Netbooks & Desktops get subtly (or radically~~) ~~different views of the same page~~.		If you are creating plugins for Moodle you need to know Bootstrap - please read through all of the docs on the Bootstrap website before proceeding (they are not long and are quite well written).

	http://getbootstrap.com/~~2.3.2~~/~~scaffolding.html#responsive~~		[http://v4-alpha.getbootstrap.com/getting-started/introduction/ Bootstrap 4 Documentation]

	~~=== Less ===~~		Bootstrap has support for responsive layouts, utilities for padding and margins, reusable components like cards, custom styling for forms and many more good things - they are all in the docs.

	Bootstrap~~'s stylesheets are written~~ in ~~a variant of CSS called LESS. It is possible to use Bootstrap without LESS as they provide the compiled output as CSS too, but for integration with existing~~ Moodle ~~HTML it is (at least currently) necessary for Moodle Bootstrap's core styles to be compiled after any changes. See the [[LESS]] page for more on this.~~		== Bootstrap versions in Moodle ==

	~~=== Glyphicons ===~~		Bootstrap releases major versions every few years and the major versions are not compatible with each other.

	Bootstrap ~~provides an set of icons called Glyphicons. These are not used for the core Moodle icons as there aren't enough suitable icons~~ to ~~cover~~ Moodle~~'s needs. But they are available for use~~ in ~~content by applying simple CSS classes via the HTML editor~~. ~~(Note~~ in the ~~next version of Bootstrap this~~ "~~icon sprite~~" ~~is replaced with an icon font~~. ~~It is hoped that Moodle can merge it's SVG icons into this font and all icons will be applied in the same manner)~~		Bootstrap 2 was first added to Moodle in Moodle 2.5 in the "bootstrapbase" theme and 2 child themes "clean" and "more".

	~~http://getbootstrap.com/2.~~3.~~2/base-css.html#icons~~		A Bootstrap 3 theme "bootstrap" exists in the Moodle plugins database and many themes are based on it.

	~~=== Grids ===~~		Boost is the new default theme for Moodle 3.2 and is based on "Bootstrap 4 alpha 4" - we have plans to upgrade to the stable release of Bootstrap 4 when it is released.

	~~Bootstrap uses CSS grids where previously web developers would have used floats (or before that tables). A key feature~~ of ~~grids is that they can "collapse" at smaller widths and so items that would be~~ in ~~a row will appear as a single column on smaller devices like iPhones.~~		Which version of bootstrap do I use in my plugins?

	~~http~~://~~getbootstrap~~.com/2.~~3.2/scaffolding~~.~~html#fluidGridSystem~~		As of Moodle 3.2 you should write all your HTML to target Bootstrap 4. We have provided some compatibility between bootstrap versions so for simple things like grids, padding, margins and floats you can use bootstrap 4 syntax and it will work in Bootstrap 2 based themes. See [https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/bs4-compat.less Bootstrap 4 compatibility] for a list of supported classes.

	==~~= Layouts =~~==		== Final Message ==

	~~The core Bootstrap~~ theme ~~uses a "Fluid Grid System". (Note that in the next version of Bootstrap, there is only one grid system~~ and ~~it is fluid, though it is no longer called that since it is the only grid system~~.)		Every time you add CSS bloat to your plugin styles.css every theme will need to be specifically tested and updated to work with your plugin.

Damyon at 06:02, 1 December 2016

2016-12-01T06:02:22Z

← Older revision		Revision as of 06:02, 1 December 2016
Line 1:		Line 1:
	{{Themes}}		{{Themes}}
	== Overview ==		== Overview ==

			This document talks about Bootstrap 4 and the Boost theme available in Moodle 3.2.

			For information about Bootstrap 2 and the older themes based on that version of the framework see [[Bootstrap 2]].


	Bootstrap (http://getbootstrap.com/2.3.2) is a "sleek, intuitive, and powerful front-end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.		Bootstrap (http://getbootstrap.com/2.3.2) is a "sleek, intuitive, and powerful front-end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.

Jmouneyrac: /* Overview */

2013-08-09T03:42:30Z

Overview

← Older revision		Revision as of 03:42, 9 August 2013
Line 8:		Line 8:
	http://getbootstrap.com/2.3.2/getting-started.html		http://getbootstrap.com/2.3.2/getting-started.html

	A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com (Note that some of these examples may use Bootstrap 3. Then the code of these examples won't work on Moodle that ~~use~~ bootstrap 2.3.2)		A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com (Note that some of these examples may use Bootstrap 3. Then the code of these examples won't work on Moodle that uses bootstrap 2.3.2)

	== Features ==		== Features ==

Jmouneyrac: /* Overview */

2013-08-09T03:42:13Z

Overview

← Older revision		Revision as of 03:42, 9 August 2013
Line 8:		Line 8:
	http://getbootstrap.com/2.3.2/getting-started.html		http://getbootstrap.com/2.3.2/getting-started.html

	A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com		A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com (Note that some of these examples may use Bootstrap 3. Then the code of these examples won't work on Moodle that use bootstrap 2.3.2)

	== Features ==		== Features ==

Jmouneyrac: /* Layouts */

2013-08-09T03:41:04Z

Layouts

← Older revision		Revision as of 03:41, 9 August 2013
Line 38:		Line 38:

	The core Bootstrap theme uses a "Fluid Grid System". (Note that in the next version of Bootstrap, there is only one grid system and it is fluid, though it is no longer called that since it is the only grid system.)		The core Bootstrap theme uses a "Fluid Grid System". (Note that in the next version of Bootstrap, there is only one grid system and it is fluid, though it is no longer called that since it is the only grid system.)

	~~http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem~~

Jmouneyrac at 03:39, 9 August 2013

2013-08-09T03:39:40Z

← Older revision		Revision as of 03:39, 9 August 2013
Line 2:		Line 2:
	== Overview ==		== Overview ==

	Bootstrap (http://getbootstrap.com) is a "sleek, intuitive, and powerful front-end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.		Bootstrap (http://getbootstrap.com/2.3.2) is a "sleek, intuitive, and powerful front-end framework for faster and easier web development". Moodle now has some themes that build upon the best practices, documentation, tools and resources that it provides.

	If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.		If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.

	http://getbootstrap.com/getting-started.html		http://getbootstrap.com/2.3.2/getting-started.html

	A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com		A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com
Line 17:		Line 17:
	A key feature of Bootstrap is responsive design. This means that the look of the page changes based on the width of your screen and allows you to alter the presentation so that iPhones, iPads, Netbooks & Desktops get subtly (or radically) different views of the same page.		A key feature of Bootstrap is responsive design. This means that the look of the page changes based on the width of your screen and allows you to alter the presentation so that iPhones, iPads, Netbooks & Desktops get subtly (or radically) different views of the same page.

	http://getbootstrap.com/scaffolding.html#responsive		http://getbootstrap.com/2.3.2/scaffolding.html#responsive

	=== Less ===		=== Less ===
Line 27:		Line 27:
	Bootstrap provides an set of icons called Glyphicons. These are not used for the core Moodle icons as there aren't enough suitable icons to cover Moodle's needs. But they are available for use in content by applying simple CSS classes via the HTML editor. (Note in the next version of Bootstrap this "icon sprite" is replaced with an icon font. It is hoped that Moodle can merge it's SVG icons into this font and all icons will be applied in the same manner)		Bootstrap provides an set of icons called Glyphicons. These are not used for the core Moodle icons as there aren't enough suitable icons to cover Moodle's needs. But they are available for use in content by applying simple CSS classes via the HTML editor. (Note in the next version of Bootstrap this "icon sprite" is replaced with an icon font. It is hoped that Moodle can merge it's SVG icons into this font and all icons will be applied in the same manner)

	http://getbootstrap.com/base-css.html#icons		http://getbootstrap.com/2.3.2/base-css.html#icons

	=== Grids ===		=== Grids ===
Line 33:		Line 33:
	Bootstrap uses CSS grids where previously web developers would have used floats (or before that tables). A key feature of grids is that they can "collapse" at smaller widths and so items that would be in a row will appear as a single column on smaller devices like iPhones.		Bootstrap uses CSS grids where previously web developers would have used floats (or before that tables). A key feature of grids is that they can "collapse" at smaller widths and so items that would be in a row will appear as a single column on smaller devices like iPhones.

	http://getbootstrap.com/scaffolding.html#fluidGridSystem		http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

	=== Layouts ===		=== Layouts ===

Cesperanc@: URL fix

2013-05-21T20:12:58Z

URL fix

← Older revision		Revision as of 20:12, 21 May 2013
Line 6:		Line 6:
	If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.		If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.

	http://getbootstrap/getting-started.html		http://getbootstrap.com/getting-started.html

	A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com		A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at http://builtwithbootstrap.com/ and http://expo.getbootstrap.com