Bootstrap is the most popular open source client-side web
design framework used for creating web applications and websites.On its fourth
anniversary, 19th Aug. 2015, Bootstrap announced the release of version 4 alpha
release and on 27th Jul. 2016, Bootstrap 4 alpha 3 was released. There are many
changes and improvements in the new version of Bootstrap.
1. New Features
1.1. Brand New
Bootstrap Cards
Cards have been introduced to unify some of the previous elements such as panels, wells, and thumbnails. It is an extensible and flexible content container. It includes options for a wide variety of content, headers and footers, powerful display options, and contextual background colors. Cards are more flexible and allow a bigger space for creative implements.
1.2. Opt-in Flexbox
Support
In the newer version of Bootstrap you can take advantage of CSS3's Flexbox Layout. Flexbox layouts
are adaptable and can be well utilized in the responsive design. It presents an
elastic container which fills the available space either by expanding or
shrinking itself to the most proficient way.
IE 9 users, please note that Flexbox does not support
version 9. Hence the default version of Bootstrap 4 uses float and display CSS
properties for the implementation of a fluid layout.
1.3. Relative CSS
Units
As a significant move to streamline the CSS -Bootstrap
4 dropped support for IE8 browser. The new release uses REMs and EMs which
enables implementation of responsive typography on Bootstrap sites. It also
improves readability and improvement in accessibility for physically challenged
users.
1.4. Handy Utilities
Various useful helper classes
have been added such as margin and padding, and text helpers. Also, there are
responsive and contextual colors helper classes to hide content on particular
breakpoints.
2.
Significant
Changes
2.1. Improved Grid System
Bootstrap's fluid grid system allows programmers to
focus various devices having different viewports. At present Bootstrap 3.x grid
system offers 4 classes to define different size columns. Bootstrap 4 improves
the fluid grid mechanism with a 5th one which facilitates programmers to aim
for small devices having a viewport of 480 px or lesser than that.
2.2. Completely Redesigned Navbar
The new Navbar is simpler. You can toggle it using the
Collapse component, the `.navbar-toggleable-xs`, `.navbar-toggleable-sm`, etc..
let you control the breakpoint. Here's an example.
2.3. Fonts are Bigger
In Bootstrap 4, the default font size which was
earlier 14px is now changed to 16px. Also, a new large display for headings which
makes text stand out.
2.4. Tether powers tooltips and Popovers
Tether,
a JavaScript library, offers the position of an absolute positioned element
stay next to each other on a web page. The power of Tether will enable
automatic placement of tooltips and popovers. Note that it is a 3rd party
library which supports IE9+, needs to be included separately in your HTML
before adding the bootstrap.js.
2.5. A New Approach to Global Theming
It will be the most interesting change. At present,
with the version 3.x, it is very hard to do changes in RAW CSS, LESS file and
overriding the settings. Easy customization of the global theme is expected in
the new version.
3.
RIP
3.1. Rearranged Support for IE
The newer version has dropped support for IE8 as it
was not supporting CSS media queries. IE 9 does not support Flexbox. To support
IE9 Bootstrap has made Flexbox as optional to integrate with the framework.
3.2. Glyphicons Dropped
Glyphicons, which was used by many, has been removed.
The alternative provided is to use Font Awesome and Octicons as third party components.
Instructions will be included eventually in the documentation.
4.
Changes
Behind the Scene
4.1. Bye Bye LESS, Hello SAAS
As compare to LESS, SASS is more popular among
frontend developers. SASS is easier to use, offers more possibilities and has
an immense community base.
4.2. Refactored JavaScript Plugins
All JavaScript plugins now are rewritten in ECMAScript
6 to take the benefit of the latest specification to improve the frontend
experience.
4.3. Optimized Variable Customization
Now all the Sass variables are incorporated into one
single file named _variables.scss. This makes customization very easy. To
change the default values, one needs to copy the settings into another file
named _custom.scss.
4.4. New Reset Component Called Reboot
The Reboot
module now replaces the normalize.css file. The new module is the enhanced
version of the normalize.css with the goal to include generic style and
selectors within a single and easy to use .SCSS file. This change enabled the
user to override the default setting in a better way without using
'!important'.
This article is based on Bootstrap 4 alpha 3 version. For
latest updates, visit the official blog.
Are you looking for assistance in a dot net or PHP
implementation requiring Bootstrap?
Write to us at metasys@metasyssoftware.com
or Call +912242545151 or visit
www.metasyssoftware.com
for more details.
Good One.
ReplyDelete