Bootstrap 4 alpha 6

21/01/2017 Bootstrap 4 Alpha 6 - PSDTOHTMLCLOUD
http://www.psdtohtmlcloud.com/blog/news/bootstrap-4-alpha-6/ 1/8
14
Jan
BOOTSTRAP 4 ALPHA 6
Alpha 6 (https://v4-alpha.getbootstrap.com/) has
arrived with some major changes.
Bootstrap 4 is a major rewrite of almost the entire project. So, you must be wondering what’s new
and what’s been removed? Biggest change you’ll notice in Alpha 6: Grid system and several
components are now built with exbox to start instead of having opt-in behavior via $enable-
flex .
Dropped IE9, went full exbox, updated navbar, more grid features, better utilities, and more. With
the lack of exbox support in IE9 (http://caniuse.com/#feat= exbox), users have no problem in
dropping IE9 support for v4 beta (https://github.com/twbs/bootstrap/issues/21387). Bootstrap has
rewritten grid system and Flexbox is enabled by default. In general this means a move away from
oats and more across Bootstrap’s components. Dropped IE8, IE9, and iOS 6 support. For sites
needing either of those, use v3.
EMBRACING FLEXBOX

Flexbox becomes the default layout option for Bootstrap 4. Sass variable $enable-flex has been
removed, Sass les cleaned up, docs consolidated, and migration and browser support notes
updated. Beyond the exbox changes, there are no additional changes to the compiled CSS at this
time.
Removed the $enable- ex variable: Flexbox is now enabled by default and cannot be disabled
via Sass variable.
Removed the non- exbox variants from grid system, cards, media objects, list groups, and
navigation components.
Consolidated grid docs to a single grid.md le (no more flexbox-grid.md.)
Updated migration and browser support docs to clarify IE10+ support.
Removed exbox.md docs from the Getting started section.
Because of these changes, here’s what’s been modi ed in the compiled CSS:
Clear x has been removed from rows as it’s no longer necessary with no float s being present.
Columns use max-width instead of width . While this was the case for the exbox grid before
this change, it’s different from the default grid’s use of width .
GRID SYSTEM UPDATES
As part of exbox, included support for vertical and horizontal alignment classes.
Responsive autosizing columns and container padding options are added.
Add any number of .col-* classes and they’ll automatically be equal in width.
Padding for grid containers can now be con gured across breakpoints with the new $grid-
gutter-widths Sass map.
In addition, you can remove gutters from grid rows and their columns with the .no-gutters
modi er.
RESPONSIVE UTILITIES AND THE GREAT INFIX
With Alpha 6, you end up with updated classes like .col-6 , .d-none , .float-right, .d-md-
flex , .justify-content-end, and .text-lg-left. These new classes make it easier for those
migrating from v3 with clearer mappings to legacy class names.
For the grid, there should be no breaking changes to your code. You can, however, take
advantage of the exbox auto layout and alignment options though!

For cards, this means you can now drop .card-deck-wrapper from your markup.
For media objects, this means you can be more exible with the order of your markup
For list groups, this simpli es the alignment of badges. No more required utilities just to
vertically and horizontally align badges in list group items. (You might still need some for
ne-tuning, though).

Even more complex components like the carousel have been modi ed to use exbox in
some places.


First, the -xs in x has been dropped from the lowest (extra small) breakpoint. xs isn’t a
responsive breakpoint quite like sm , md , lg , and xl because it doesn’t start applying styles at
a min-width and up. It simply applies to everything as there’s no bounding @media query.
Second, several classes have been renamed to better articulate their property-value pairings.
Instead of pull, now use oat. Instead of creating new names for the various exbox properties,
start with the property name.
UPDATED NAVBAR
As mentioned in our last article BOOTSTRAP 4 ALPHA 5
(http://www.psdtohtmlcloud.com/blog/news/bootstrap-4-alpha-5/), the Alpha 5 navbar was a little
half baked. This time around, its completely baked. No, but seriously, the navbar has been rewritten
to provide better built-in responsive behavior and improved layout customisation thanks to the
move to exbox. Here’s the rundown on what’s changed:
Navbars are built with exbox! Instead of oats, you’ll need exbox (https://v4-
alpha.getbootstrap.com/utilities/ exbox/) and margin utilities (https://v4-
alpha.getbootstrap.com/utilities/spacing/).
Navbar navs no longer require the .nav base class. Now it’s just .navbar-nav and utilities for
alignment.
The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse
within.
The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again
a child element, .navbar-toggler-icon, for improved customisation.
Check out the navbar docs (https://v4-alpha.getbootstrap.com/components/navbar/) to learn more
and see it in action.
Do you want to migrate your website from Bootstrap 3 to Bootstrap 4, then you can Migrate to v4
(https://v4-alpha.getbootstrap.com/migration/) easily.
Looking for someone who can develop a website or
mobile app for you with the latest Bootstrap Alpha 6,
checkout our PSD to HTML
(http://www.psdtohtmlcloud.com/psd-to-html) service.
Feel free to contact us
(http://www.psdtohtmlcloud.com/contact-us), we will
develop your website for you so that you can focus on
things that you love doing most and enjoy being your own
boss.
UP NEXT, FIRST BETA

UP NEXT, FIRST BETA
Like you, we’re very much ready for the rst beta release. Bootstrap is focused on not adding
anything new, ideally making as few breaking changes as possible, and emphasizing documentation
quality and bug xes.

Bootstrap 4 alpha 6

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Bootstrap 4 alpha 6

Similaire à Bootstrap 4 alpha 6 (20)

Dernier

Dernier (20)

Bootstrap 4 alpha 6