Bootstrap 3 vs Bootstrap 4: Difference between revisions
| Line 20: | Line 20: | ||
[[Card (Bootstrap)|Card]]: New control for displaying formatted information. | [[Card (Bootstrap)|Card]]: New control for displaying formatted information. | ||
Fliptoggle | [[Fliptoggle (Bootstrap)|'''Fliptoggle''']] | ||
* replaced by Switch | * replaced by Switch | ||
Icons | '''Icons''' | ||
* Now uses [https://useiconic.com/open/ Open Iconic]. | * Now uses [https://useiconic.com/open/ Open Iconic]. | ||
* Names of some icons have changed. | * Names of some icons have changed. | ||
| Line 29: | Line 29: | ||
* Much smaller! 372k went down to 24k. | * Much smaller! 372k went down to 24k. | ||
Labels | '''Labels''' | ||
* Replaced by Badges and [[Alert (Bootstrap)|Alerts]]. | * Replaced by Badges and [[Alert (Bootstrap)|Alerts]]. | ||
* We left a simple Label control in BS4. | * We left a simple Label control in BS4. | ||
[[Media (Bootstrap)|Media]]: | [[Media (Bootstrap)|'''Media''']]: | ||
* imageHorizontal and imageAlignment properties dropped. | * imageHorizontal and imageAlignment properties dropped. | ||
[[Modal (Bootstrap)|Modal]]: | [[Modal (Bootstrap)|'''Modal''']]: | ||
* Footer text is always aligned right | * Footer text is always aligned right | ||
* long text scrolls automatically | * long text scrolls automatically | ||
| Line 44: | Line 44: | ||
[[Navs (Bootstrap)|Navs]]: New control. | [[Navs (Bootstrap)|Navs]]: New control. | ||
[[Pageheader (Bootstrap)|Pageheader]]: | [[Pageheader (Bootstrap)|'''Pageheader''']]: | ||
* Dropped | * Dropped | ||
[[Panel (Bootstrap)|Panel]]: | [[Panel (Bootstrap)|'''Panel''']]: | ||
* Dropped | * Dropped | ||
[[Tabs (Bootstrap)|Tabs]]: | [[Tabs (Bootstrap)|'''Tabs''']]: | ||
* Dropped - replaced by Navs. | * Dropped - replaced by Navs. | ||
[[Thumbnail (Bootstrap)|Thumbnail]]: | [[Thumbnail (Bootstrap)|'''Thumbnail''']]: | ||
* Dropped | * Dropped | ||
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 16:09, 1 February 2019
Support for Bootstrap 3 was added in AppStudio 6. Since then, Bootstrap 4 has been released.
They 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.
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.
Summary of notable changes
All controls
- The default font size has been increased from 14px to 16px.
- Extra small size is gone.
- No more 'default' appearance.
- Secondary, light and dark added to appearances.
- New outline property makes outline only Buttons.
Card: New control for displaying formatted information.
- replaced by Switch
Icons
- Now uses Open Iconic.
- Names of some icons have changed.
- Rotation no longer built in.
- Much smaller! 372k went down to 24k.
Labels
- 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.
Navs: New control.
- Dropped
- Dropped
Tabs:
- Dropped - replaced by Navs.
- Dropped
Themes
- Dropped: readable and paper
- Added: lux, materia, minty, pulse and solar