diff --git a/README.md b/README.md index 70899e6..6994a54 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,9 @@ configuration it can add a new [gallery][Gallery] mode, and replace normal Please also see the [known issues][known-issues] section. -There is also a [migration guide](docs/migration-guide.md) for users switching -from bootstrap3 (BootstrapComponents ~1.2) to bootstrap4 (BootstrapComponents ~4.0). +There are also migration guides for users switching +to [Bootstrap 5](docs/migration-guide-bs5.md) (Bootstrap Components ~6.0) and +to [Bootstrap 4](docs/migration-guide-bs4.md) (Bootstrap Components ~4.0 and ~5.0). ## Contact For bug reports and feature requests, please see if it is already reported on diff --git a/docs/migration-guide-bs4.md b/docs/migration-guide-bs4.md new file mode 100644 index 0000000..c5d2033 --- /dev/null +++ b/docs/migration-guide-bs4.md @@ -0,0 +1,65 @@ +## Migration Guide: Bootstrap 3 to 4 + +There have been some changes between versions ~1.0 and ~4.0. Foremost is that +the new BootstrapComponents utilizes Twitter Bootstrap4. Therefore, it mirrors +changes made by Bootstrap. + +Also, extension loading must now be done manually in your LocalSettings, no +matter whether you installed it via composer or manually. + +### Changes in extension loading +BootstrapComponents now has to loaded manually, whether you installed it +via composer or by cloning it from github. Just add the following to +your `LocalSettings.php` file: + +``` +wfLoadExtension( 'BootstrapComponents' ); +``` + +### Changes in Components +There have been some changes in the components provided by Bootstrap4 and +the ExtensionBootstrap. Some of them unfortunately need your attention. + +#### Icon +This is the change with the severest impact: the glyphicon font has been +removed. BootstrapComponents unfortunately cannot provide a suitable +replacement. If you need fancy items, please have a look at +[Extension:FontAwesome][FontAwesome]. + +#### Label +The Label component has been removed, its functionality is now provided +by the Badge Component. **BootstrapComponents takes care of that** by +having the label component inside your wiki text rendered with +bootstrap4's badge attributes and classes. + +In other words, you can use these two elements in your wiki and +they both produce the same output: +```html +{{#bootstrap_label: text | .. }} +{{#bootstrap_badge: text | .. }} +``` + +However, it is recommended that on new pages or new edits you now only +use the badge component. + +#### Panel and Well +Bootstrap4 removes the Panel and the Well and introduces the new +component Card. Since "Bootstrap’s cards provide a flexible +and extensible content container with multiple variants and options." +it can be used to render things to look like Panels and Wells. +Again, **BootstrapComponents takes care of that** by rendering +a Well and a Panel like a Bootstrap4 Card. + +Subsequently, these calls all produce the same output: +```html +Content text for the box +Content text for the box +Content text for the box +``` + +This includes panels inside accordions, as well. + +Again, it is recommended that on new pages or new edits you now only +use the card component. + +[FontAwesome]: https://www.mediawiki.org/wiki/Extension:FontAwesome diff --git a/docs/migration-guide-bs5.md b/docs/migration-guide-bs5.md new file mode 100644 index 0000000..eaf5ad0 --- /dev/null +++ b/docs/migration-guide-bs5.md @@ -0,0 +1,78 @@ +## Migration Guide: Bootstrap 4 to 5 + +Bootstrap Components 6.0 moves the underlying framework from Bootstrap 4 +to Bootstrap 5.3. All components keep their wikitext syntax: no parser +function or tag was removed or renamed, and existing pages keep parsing +as before. What needs attention is everything a wiki builds around the +emitted markup. + +### New requirements + +* MediaWiki 1.43 or later +* PHP 8.1 or later +* Bootstrap extension 6.x, which bundles the Bootstrap 5.3 library + +Upgrade the Bootstrap extension together with Bootstrap Components; the +two versions belong together. + +### Jumbotron + +Bootstrap 5 removed the `.jumbotron` component. +**Bootstrap Components takes care of that** by rebuilding the component +from [utility classes][BS5-jumbotron] (`p-5 mb-4 bg-body-tertiary +rounded-3`), so existing jumbotrons keep working. Expect slight visual +differences, and note that custom CSS targeting `.jumbotron` no longer +matches anything. + +### Custom CSS targeting emitted markup + +Bootstrap 5 renamed classes and restructured some components, and the +markup this extension emits changed accordingly. Rules in +`MediaWiki:Common.css` (or skin CSS) written against the old output +need review. The changes most likely to matter: + +| Emitted before | Emitted now | +| -------------- | ----------- | +| `close` (alert and modal close button) | `btn-close` | +| `badge-{color}` | `text-bg-{color}` | +| `badge-pill` | `rounded-pill` | +| `jumbotron` | `p-5 mb-4 bg-body-tertiary rounded-3` | +| carousel indicators as `
    `/`
  1. ` | `