edit-article
Home
Up
Delete
Article Name:
Article Description:
] whats new in bootstrap 4, what changes from bootstrap 3, a cumulative analysis of multiple documents comparing these 2 CSS frameworks
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">bootstrap 4 versus bootstrap 3</h1> <h2>[WHAT]</h2> <ol> <li>] by Don Sagrott, founder @ sospep.com - ] a cumulative analysis of multiple documents( ref # 4, # 5,, # 6 ) comparing these 2 CSS framework versions</li> </ol> <h2>[WHY]</h2> <ol> <li>] whats new in bootstrap 4, </li> <li>] what changes from bootstrap 3,</li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>] READ THE FULL ARTICLE</strong></li> <ol> <li>] </li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>] 2016-11-26 x</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li><strong>[new] grid has changed, 5 tiers VS 4</strong></li> <ol> <li><strong>] bs 3 grid = large(lg 1200 +), medium(md 1024x768), small(sm 768x1024), extra small (xs 768 -)</strong></li> <li>] in Bootstrap 3, the smallest breakpoint has a wide range of devices less than 768px in width. As a result, there’s no simple way to create different grid layouts for typical smartphone screens (~375px). There is also no way to distinguish between portrait and landscape mode on mobile devices.</li> <li><strong>] bs 4 grid = extra large(xl 1200+ desktops and laptops), large(lg 1024x768 tablet landscape), medium(md 768 x1024 tablets portrait, phablets landscap), small(sm 667x375 phablets, smartphone landscape) and extra small(xs 375x667 smartphone portrait) </strong></li> <li>] the additional tier allows us to target smaller devices less than 544 px, and create layouts specifically for this screen width</li> <li>] REF# 4</li> </ol> <li><strong>[new] flexbox</strong></li> <ol> <li>] Thanks to flexbox (and display:table when flexbox is not enabled) we now have equal height cards!</li> <li>] Flexbox provides simpler, more flexible layout options like vertical centering. Simply set the $enable-flex variable to enable flexbox in Bootstrap 4. Introduced in CSS3, flexbox won't work in older browsers like IE9, REF# 4.1 </li> <li>] REF# 4</li> </ol> <li><strong>[new] CARDS - </strong></li> <ol> <li>] What you notice first in Bootstrap 4 is that .panel and .well have been replaced by the .card. This makes a lot of sense as "cards" are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together (as shown) or equal height. There are many different layout and content options. </li> <li>] much easier to create groups of same height cards…</li> <li>] REF# 4</li> </ol> <li><strong>[new] tag</strong></li> <ol> <li>] replaces label</li> <li>] REF# 4</li> </ol> <li><strong>[new] fonts</strong></li> <ol> <li>] The new native font stack is now the default.</li> <li>] The default font size went from 14px to 16px in the new Bootstrap 4. </li> <li><span style="background-color: #ffff00;">] All of the font sizing in Bootstrap 4 is completely based on `rem` units so that all font sizes are relative to the root element.</span></li> <li>] REF# 4 </li> </ol> <li><strong>[new] buttons</strong></li> <ol> <li>] now come in a new outline flavour</li> <li>] REF# 4</li> </ol> <li><strong>[new] utility classes</strong></li> <ol> <li>] the addition of responsive floats that enable you to float an element (left, right, etc..) based on the grid tier. </li> <li>] very handy spacing utility classes that enable better control of horizontal & vertical space using variable margins and padding around elements.</li> <li>] REF# 4</li> </ol> <li><strong>[new] source code is now SASS</strong></li> <ol> <li>] previously used less, </li> <li>] REF# 5</li> </ol> <li><strong>[new] improved grid system using rems</strong></li> <ol> <li>] Using the Bootstrap grid still follows the same HTML syntax, but the underlining architecture changed quite a bit.</li> <li>] EX container, row col, </li> <li>] EX container-fluid, row, col ( for full width rows )</li> <li>] EX ( nested rows)</li> <li>] The main difference is the way the spacing is done. A container now has max-width set in rems. A row now has default negative left and right margin of -.9375rem, while columns have default left and right padding of 0.9375rem. These values were previously 15px in Bootstrap 3. These new rem values are almost the same as that. </li> <li>] We’ll explain rem a little bit more later, but the main thing to take-away is everything is dynamic and relative to the root HTML tag.</li> <li>] REF# 5</li> </ol> <li><strong>[new] opt in flexbox grid</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] improved media queries</strong></li> <ol> <li>] Bootstrap 4 hit the nail on the head with media queries.</li> <li>*] boostrap 3 media queries EXAMPLE - </li> <li>] REF# 5</li> </ol> <li><strong>[new] cards</strong></li> <ol> <li>] They’re essentially individual content blocks with a ton of out-of-the-box options. </li> <li>] The big thing to take away here is you get a ton of new component options to basically build these little card blocks however you want. </li> <li>] It’s also worth looking into the Card Groups and Card Decks in the demo. You’ll notice that even though their contents are different sizes, they’re all equal in height without JavaScript.</li> <li>] REF# 5 </li> </ol> <li><strong>[new] reset component</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] SASS variables for customizing</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] no IE8 support</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] JS improvements</strong></li> <ol> <li>] es6 support</li> <li>] jq 2.0 good to go</li> <li>] UMD/AMD issues resolved</li> <li>] REF# 5</li> </ol> <li><strong>[new] quickstart options</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] new units(REMs) for typography</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] display headings</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] inverse tables</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] 30% smaller footprint</strong></li> <ol> <li>] 88kb VS 123kb for v3</li> <li>] REF# 5</li> </ol> <li><strong>[new] outline buttons, ] CC #7</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] no glyphicons</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] spacing utility class, ] CC # 8</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] WTF forms integration</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol> <li><strong>[new] additional responsive embeds</strong></li> <ol> <li>] </li> <li>] REF# 5</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li><strong>[00:00] why we choose bs</strong></li> <ol> <li>] we have experince with bs</li> <li>] bs is widely adopted </li> <li>] there are lots of 3rd party themes, ..., available for bs</li> <li>[ </li> </ol> <li><strong>[00:00] bs 4 - conclusions</strong></li> <ol> <li>] Even though Bootstrap 4 is only in alpha, it’s still really exciting. Bootstrap has come along way. There is currently no planned release date for Bootstrap 4, but you can <a href="https://github.com/twbs/bootstrap/pull/17021" target="_blank">follow along with the action</a> .</li> <li>] REF# 5</li> </ol> <li><strong>[] how to - instruction</strong></li> <ol> <li>] checkout latest v from github repo</li> <li>] </li> </ol></ol> <h2>[REFERENCE]</h2> <ol> <li>] # 6575 <a href="/view/task?id=6575" target="_blank">CREATE-article# 5433</a> (this) - whats new in bootstrap 4 || bootstrap 4 vs bootstrap 3</li> <li>] <a href="https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387#.wdctgqubv%20" target="_blank">Bootstrap 4 a visual guide</a> - by Carol Skelly ON medium.com - Skelly illustrates the differences between the upcoming bootstrap version 4 and the current bootstrap version 3</li> <ol> <li>] <a href="http://bootstrap4.guide/" target="_blank">http://bootstrap4.guide/</a> - site demonstrating the newest bootstrap features</li> </ol> <li>x] r# # - ] <a href="https://scotch.io/bar-talk/whats-new-in-bootstrap-4" target="_blank">What’s New in Bootstrap 4</a>,SRC=best-of-hn-2015-08-25(184)/<a href="https://news.ycombinator.com/item?id=10116916" target="_blank">comments</a>(43) ] by Nicholas Cerminara @scotch.io - from a developer perspective</li> <li>] r# # - <a href="http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm" target="_blank">http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm</a> - feature table comparing bootstrap 4 features vs bootstrap 3 features, </li> </ol> <h2>[RELATED]</h2> <div><ol> <li>] https://v4-alpha.getbootstrap.com/ - the official bootstrap site </li> <li>] <a href="https://devdocs.io/bootstrap~4/" target="_blank">https://devdocs.io/bootstrap~4/</a></li> <li>x] td] <a href="http://hackerthemes.com/bootstrap-cheatsheet#dropdown" target="_blank">BootStrap 4 cheatsheet</a> (hackerthemes.com), SRC=best-of-hn-2016-04-21 (311)/<a href="https://news.ycombinator.com/item?id=11541992" target="_blank">comments</a>(130) </li> <li>x] td] <a href="http://blog.getbootstrap.com/2016/09/05/bootstrap-4-alpha-4/" target="_blank">Bootstrap 4 Alpha 4 Released</a> (getbootstrap.com),SRC=best-of-hn-2016-09-05(142)/<a href="https://news.ycombinator.com/item?id=12432136" target="_blank">comments</a>(76) - 4th alpha version release, announces that development on bootstrap v 3 will be stopped in order to advance v 4 more quickly </li> <li>x] r# # - td] <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" target="_blank">Bootstrap 4 Alpha</a> (getbootstrap.com),SRC=best-of-hn-2015-08-19(655)/<a href="https://news.ycombinator.com/item?id=10086651" target="_blank">comments</a>(208) - initial announcement of upcoming alpha version release</li> <li>] # 5439 - <a href="/view/article?id=5439" target="_blank">bootstrap</a> - an overview of this front end framework</li> <li>] # # - TOC - CSS </li> <li>] # # - ART <a href="https://medium.com/wdstack/responsive-design-6-bootstrap-alternatives-e9889470c355#.3ke67dllz" target="_blank">bootstrap alternatives</a> - ] by Carol Skelly @ wdstack - Skelly looks at 6 bootstrap alternatives including foundation, skeleton, purecss, uikit, <a href="http://semantic-ui.com/" target="_blank">semantic-ui</a> and <a href="http://materializecss.com/" target="_blank">materialize</a> </li> </ol></div>