Bootstrap 5: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 12: | Line 12: | ||
===Summary of notable changes=== | ===Summary of notable changes=== | ||
[[Alert (Bootstrap)|'''Alert''']]: | |||
* Can act as a Container. | |||
[[Button (Bootstrap)|'''Button''']]: | [[Button (Bootstrap)|'''Button''']]: | ||
* Updated buttons to ensure increased contrast on hover and active states. | * Updated buttons to ensure increased contrast on hover and active states. | ||
* Disabled buttons now have '''pointer-events: none;'''. | * Disabled buttons now have '''pointer-events: none;'''. | ||
[[Card (Bootstrap)|'''Card''']] | [[Card (Bootstrap)|'''Card''']] | ||
* | * Simplifications to HTML | ||
[[Datatable (Bootstrap)|'''Datatable''']] | |||
* Libraries updated to support BS5 | |||
[[Fliptoggle (Bootstrap)|'''Fliptoggle''']] | [[Fliptoggle (Bootstrap)|'''Fliptoggle''']] | ||
| Line 27: | Line 30: | ||
'''Icons''' | '''Icons''' | ||
* Based on [https:// | * Based on [https://icons.getbootstrap.com/ Bootstrap's own icons]. Small and fast; svg based. | ||
* Names of some icons have changed. | * Names of some icons have changed. | ||
* | * User icons can be svg or css | ||
* | |||
[[Input (Bootstrap 5)|'''Input and Input-item''']] | |||
* Completely new Input control | |||
* Allows mix of inputText, literals, textareas, checkboxes and radio on a single line. | |||
[[Jumbotron (Bootstrap)|'''Jumbotron''']] | |||
* Dropped. It can be built up from other controls. | |||
[[ | [[Listgroup (Bootstrap)|'''Listgroup''']] | ||
* | * Add list-group-numbered | ||
[[Media (Bootstrap)|'''Media''']]: | [[Media (Bootstrap)|'''Media''']]: | ||
| Line 45: | Line 53: | ||
* vertical position can be selected. | * vertical position can be selected. | ||
[[ | [[OffCanvas (Bootstrap 5)|'''OffCanvas''']] | ||
* New control. | * New control. Puts up a panel over part of your screen. | ||
[[ | [[Toasts (Bootstrap)|'''Toasts''']] | ||
* | * Changed default toast duration to 5 seconds. | ||
'''Themes''' | '''Themes''' | ||
* Dropped: readable and paper | * Dropped: readable and paper | ||
* Added: lux, materia, minty, pulse and solar | * Added: lux, materia, minty, pulse and solar | ||
Revision as of 21:41, 31 October 2022
Support for Bootstrap 4 was added in AppStudio 7. Since then, Bootstrap 5 has been released.
There are many changes in Bootstrap 5: more than we could build a migration for. Bootstrap 5 is a separate framework. We will continue to support Bootstrap 3 and 4 for existing projects, but recommend using Bootstrap 5 for new projects.
We were able to make most of the changes in our code, so most of the controls work pretty much the same way. The code emitted by AppStudio is quite different.
Since Bootstrap 3, 4 and 5 share many internal variable names, controls from the two frameworks cannot be included in the same project.
Here's are a couple of detailed summaries of the changes from Bootstrap 4 to Bootstrap 5:
- https://getbootstrap.com/docs/5.0/migration/
- https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/
Summary of notable changes
- Can act as a Container.
- Updated buttons to ensure increased contrast on hover and active states.
- Disabled buttons now have pointer-events: none;.
- Simplifications to HTML
- Libraries updated to support BS5
- replaced by Switch
Icons
- Based on Bootstrap's own icons. Small and fast; svg based.
- Names of some icons have changed.
- User icons can be svg or css
- Completely new Input control
- Allows mix of inputText, literals, textareas, checkboxes and radio on a single line.
- Dropped. It can be built up from other controls.
- Add list-group-numbered
- imageHorizontal and imageAlignment properties dropped.
- Footer text is always aligned right
- long text scrolls automatically
- Children are in footer.
- vertical position can be selected.
- New control. Puts up a panel over part of your screen.
- Changed default toast duration to 5 seconds.
Themes
- Dropped: readable and paper
- Added: lux, materia, minty, pulse and solar