Bootstrap 5: Difference between revisions
Jump to navigation
Jump to search
(Created page with "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 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 quit...") |
No edit summary |
||
| Line 1: | Line 1: | ||
Support for Bootstrap 4 was added in AppStudio 7. Since then, Bootstrap 5 has been released. | 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 a separate framework. We will continue to support Bootstrap 3 and 4 for existing projects, but recommend using Bootstrap 5 for new projects. | 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. | 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. | ||
| Line 8: | Line 8: | ||
Here's are a couple of detailed summaries of the changes from Bootstrap 4 to Bootstrap 5: | Here's are a couple of detailed summaries of the changes from Bootstrap 4 to Bootstrap 5: | ||
* https://getbootstrap.com/docs/ | * https://getbootstrap.com/docs/5.0/migration/ | ||
* https:// | * https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/ | ||
===Summary of notable changes=== | ===Summary of notable changes=== | ||
[[Button (Bootstrap)|'''Button''']]: | [[Button (Bootstrap)|'''Button''']]: | ||
* | * Updated buttons to ensure increased contrast on hover and active states. | ||
* | * Disabled buttons now have '''pointer-events: none;'''. | ||
* Secondary, light and dark added to appearances. | * Secondary, light and dark added to appearances. | ||
* New outline property makes outline only Buttons. | * New outline property makes outline only Buttons. | ||
Revision as of 21:28, 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
- Updated buttons to ensure increased contrast on hover and active states.
- Disabled buttons now have pointer-events: none;.
- Secondary, light and dark added to appearances.
- New outline property makes outline only Buttons.
- New iconTitle displays text while hovering above.
- New control for displaying formatted information.
- replaced by Switch
Icons
- Based on Open Iconic.
- Names of some icons have changed.
- Rotation no longer built in.
- Much smaller! 372k went down to 24k.
- Replaced by Badges and Alerts.
- We left a simple Label control in BS4.
- 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.
- Dropped
- Dropped
- Dropped - replaced by Navs.
- Dropped
Themes
- Dropped: readable and paper
- Added: lux, materia, minty, pulse and solar