Bootstrap 5: Difference between revisions

From NSB App Studio
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
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
Support for Bootstrap 4 was added in AppStudio 7. Since then, Bootstrap 5 has been released.
AppStudio 9 adds support for Bootstrap 5. Bootstrap 4 continues to be supported by the Bootstrap team, so there is no need to convert. Bootstrap 5 brings a number of improvements and refinements.


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 accomodate most of the changes within our code, so most of the controls work pretty much the same way as they did in Bootstrap 4. 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.
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:
Here's are a couple of detailed summaries of the changes from Bootstrap 4 to Bootstrap 5:
* https://getbootstrap.com/docs/4.2/migration/
* https://getbootstrap.com/docs/5.0/migration/
* https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm
* https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/


===Summary of notable changes===
===Summary of notable changes===


'''All controls'''
* rtl support added for right justified languages.
* The default font size has been increased from 14px to 16px.
 
[[Alert (Bootstrap)|'''Alert''']]:
* Can act as a Container.


[[Button (Bootstrap)|'''Button''']]:  
[[Button (Bootstrap)|'''Button''']]:  
* Extra small size is gone.  
* Updated buttons to ensure increased contrast on hover and active states.
* No more 'default' appearance.
* 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.


[[Card (Bootstrap)|'''Card''']]
[[Card (Bootstrap)|'''Card''']]
* New control for displaying formatted information.
* Simplifications to HTML
 
[[DataTable (Bootstrap)|'''DataTable''']]
* Libraries updated to support BS5


[[Fliptoggle (Bootstrap)|'''Fliptoggle''']]
[[Fliptoggle (Bootstrap)|'''Fliptoggle''']]
Line 30: Line 32:


'''Icons'''
'''Icons'''
* Based on [https://www.nsbasic.com/app/OpenIconic.html Open Iconic].
* 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.
* Rotation no longer built in.  
* User icons can be svg or css
* Much smaller! 372k went down to 24k.
 
[[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.


[[Label (Bootstrap)|'''Label''']]  
[[Listgroup (Bootstrap)|'''Listgroup''']]  
* Replaced by Badges and [[Alert (Bootstrap)|Alerts]].
* Add list-group-numbered
* We left a simple Label control in BS4.


[[Media (Bootstrap)|'''Media''']]:  
[[Media (Bootstrap)|'''Media''']]:  
Line 48: Line 55:
* vertical position can be selected.
* vertical position can be selected.


[[Navs (Bootstrap)|'''Navs''']]
[[OffCanvas (Bootstrap 5)|'''OffCanvas''']]
* New control.
* New control. Puts up a panel over part of your screen.
 
[[Pageheader (Bootstrap)|'''Pageheader''']]
* Dropped
 
[[Panel (Bootstrap)|'''Panel''']]:
* Dropped


[[Tabs (Bootstrap)|'''Tabs''']]
[[Toast (Bootstrap)|'''Toasts''']]
* Dropped - replaced by Navs.
* Changed default toast duration to 5 seconds.


[[Thumbnail (Bootstrap)|'''Thumbnail''']]
* Dropped


'''Themes'''
'''Themes'''
* Dropped: readable and paper
* Added: morph, quartz, vapor and zephyr
* Added: lux, materia, minty, pulse and solar

Latest revision as of 17:28, 29 May 2023

AppStudio 9 adds support for Bootstrap 5. Bootstrap 4 continues to be supported by the Bootstrap team, so there is no need to convert. Bootstrap 5 brings a number of improvements and refinements.

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 accomodate most of the changes within our code, so most of the controls work pretty much the same way as they did in Bootstrap 4. 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:

Summary of notable changes

  • rtl support added for right justified languages.

Alert:

  • Can act as a Container.

Button:

  • Updated buttons to ensure increased contrast on hover and active states.
  • Disabled buttons now have pointer-events: none;.

Card

  • Simplifications to HTML

DataTable

  • Libraries updated to support BS5

Fliptoggle

  • 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

Input and Input-item

  • Completely new Input control
  • Allows mix of inputText, literals, textareas, checkboxes and radio on a single line.

Jumbotron

  • Dropped. It can be built up from other controls.

Listgroup

  • Add list-group-numbered

Media:

  • imageHorizontal and imageAlignment properties dropped.

Modal:

  • Footer text is always aligned right
  • long text scrolls automatically
  • Children are in footer.
  • vertical position can be selected.

OffCanvas

  • New control. Puts up a panel over part of your screen.

Toasts

  • Changed default toast duration to 5 seconds.


Themes

  • Added: morph, quartz, vapor and zephyr
Retrieved from "https://wiki.appstudio.dev/index.php?title=Bootstrap_5&oldid=11355"