Bootstrap: Difference between revisions

Latest revision as of 06:51, 1 December 2016

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.

Overview

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

Bootstrap 4

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

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.

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).

Bootstrap 4 Documentation

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 versions in Moodle

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

Bootstrap 2 was first added to Moodle in Moodle 2.5 in the "bootstrapbase" theme and 2 child themes "clean" and "more".

A Bootstrap 3 theme "bootstrap" exists in the Moodle plugins database and many themes are based on it.

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?

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 Bootstrap 4 compatibility for a list of supported classes.

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.

@@ Line 1: / Line 1: @@
 {{Themes}}
-== Overview ==
-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.
+This document talks about Bootstrap 4 and the Boost theme available in Moodle 3.2.
-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.
+For information about Bootstrap 2 and the older themes based on that version of the framework see [[Bootstrap 2]].
-http://getbootstrap.com/2.3.2/getting-started.html
+== Overview ==
+Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.
-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
-== Features ==
+[http://v4-alpha.getbootstrap.com/ Bootstrap 4]
-=== Responsive design ===
+Moodle 3.2 includes a new default theme "Boost" based on Bootstrap 4.
-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.
+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.
-http://getbootstrap.com/2.3.2/scaffolding.html#responsive
+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).
-=== Less ===
+[http://v4-alpha.getbootstrap.com/getting-started/introduction/ Bootstrap 4 Documentation]
-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 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.
-=== Glyphicons ===
+== Bootstrap versions in Moodle ==
-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 releases major versions every few years and the major versions are not compatible with each other.
-http://getbootstrap.com/2.3.2/base-css.html#icons
+Bootstrap 2 was first added to Moodle in Moodle 2.5 in the "bootstrapbase" theme and 2 child themes "clean" and "more".
-=== Grids ===
+A Bootstrap 3 theme "bootstrap" exists in the Moodle plugins database and many themes are based on it.
-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.
+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.
-http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
+Which version of Bootstrap do I use in my plugins?
-=== Layouts ===
+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.
-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.)
+== Final Message ==
-http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
+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.