Bootstrap: Difference between revisions
Damyon Wiese (talk | contribs) No edit summary |
Damyon Wiese (talk | contribs) |
||
| 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 | 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. | ||
Revision as of 06:50, 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.
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 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.
