Bootstrap 3 vs Bootstrap 4: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
Support for Bootstrap 3 was added in AppStudio 6. Since that release, the developers of Bootstrap have released Version 4.
Support for Bootstrap 3 was added in AppStudio 6. Since then, Bootstrap 4 has been released.


They [https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm made a lot of changes] in Bootstrap 4: more than we could build a migration for in AppStudio 7. We ended up making Bootstrap 4 a separate framework. We will continue to support Bootstrap 3 for existing projects, but recommend using Bootstrap 4 for new projects.
There are many changes in Bootstrap 4: more than we could build a migration for in AppStudio 7. We ended up making Bootstrap 4 a separate framework. We will continue to support Bootstrap 3 for existing projects, but recommend using Bootstrap 4 for new projects.


We were able to make most of the changes in our code, so 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 the controls work pretty much the same way. The code emitted by AppStudio is quite different.


Since Bootstrap 3 and Bootstrap 4 share many internal variable names, controls from the two frameworks cannot be included in the same project.
Since Bootstrap 3 and Bootstrap 4 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 3 to Bootstrap 4:
* https://getbootstrap.com/docs/4.2/migration/
* https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm


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


[[Button (Bootstrap)|Button]]: Extra small size is gone. No more 'default' appearance.
'''All controls'''
* The default font size has been increased from 14px to 16px.
 
[[Button (Bootstrap)|'''Button''']]:  
* Extra small size is gone.  
* No more 'default' appearance.  
* Secondary, light and dark added to appearances.
* New outline property makes outline only Buttons.
* New iconTitle displays text while hovering above.
 
[[Card (Bootstrap)|'''Card''']]
* New control for displaying formatted information.
 
[[Fliptoggle (Bootstrap)|'''Fliptoggle''']]
* replaced by Switch


[[Button (Bootstrap)|Button]]: New outline property.
'''Icons'''
* Based on [https://www.nsbasic.com/app/OpenIconic.html Open Iconic].
* Names of some icons have changed.
* Rotation no longer built in.
* Much smaller! 372k went down to 24k.


[[Card (Bootstrap)|Card]]: New control for displaying formatted information.
[[Label (Bootstrap)|'''Label''']]  
* Replaced by Badges and [[Alert (Bootstrap)|Alerts]].
* We left a simple Label control in BS4.


Icons: Now using [https://useiconic.com/open/ Open Iconic]. Names of some icons have changed. Rotation no longer built in. Much smaller!
[[Media (Bootstrap)|'''Media''']]:  
* imageHorizontal and imageAlignment properties dropped.


Labels: Replaced by Badges and [[Alert (Bootstrap)|Alerts]]. We left a simple Label control in BS4.
[[Modal (Bootstrap)|'''Modal''']]:
* Footer text is always aligned right
* long text scrolls automatically
* Children are in footer.
* vertical position can be selected.


[[Media (Bootstrap)|Media]]: No more imageHorizontal or imageAlignment.
[[Navs (Bootstrap)|'''Navs''']]
* New control.


[[Navs (Bootstrap)|Navs]]: New control.
[[Pageheader (Bootstrap)|'''Pageheader''']]
* Dropped


[[Pageheader (Bootstrap)|Pageheader]]: Removed.
[[Panel (Bootstrap)|'''Panel''']]:  
* Dropped


[[Panel (Bootstrap)|Panel]]: Removed.
[[Tabs (Bootstrap)|'''Tabs''']]
* Dropped - replaced by Navs.


[[Tabs (Bootstrap)|Tabs]]: Removed.
[[Thumbnail (Bootstrap)|'''Thumbnail''']]
* Dropped


[[Thumbnail (Bootstrap)|Thumbnail]]: Removed.
'''Themes'''
* Dropped: readable and paper
* Added: lux, materia, minty, pulse and solar

Latest revision as of 19:45, 4 February 2019

Support for Bootstrap 3 was added in AppStudio 6. Since then, Bootstrap 4 has been released.

There are many changes in Bootstrap 4: more than we could build a migration for in AppStudio 7. We ended up making Bootstrap 4 a separate framework. We will continue to support Bootstrap 3 for existing projects, but recommend using Bootstrap 4 for new projects.

We were able to make most of the changes in our code, so the controls work pretty much the same way. The code emitted by AppStudio is quite different.

Since Bootstrap 3 and Bootstrap 4 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 3 to Bootstrap 4:

Summary of notable changes

All controls

  • The default font size has been increased from 14px to 16px.

Button:

  • Extra small size is gone.
  • No more 'default' appearance.
  • Secondary, light and dark added to appearances.
  • New outline property makes outline only Buttons.
  • New iconTitle displays text while hovering above.

Card

  • New control for displaying formatted information.

Fliptoggle

  • 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.

Label

  • Replaced by Badges and Alerts.
  • We left a simple Label control in BS4.

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.

Navs

  • New control.

Pageheader

  • Dropped

Panel:

  • Dropped

Tabs

  • Dropped - replaced by Navs.

Thumbnail

  • Dropped

Themes

  • Dropped: readable and paper
  • Added: lux, materia, minty, pulse and solar
Retrieved from "https://wiki.appstudio.dev/index.php?title=Bootstrap_3_vs_Bootstrap_4&oldid=9884"