Bootstrap 4: New features are extremely interesting

Tram Ho

Introduce

Bootstrap, one of the most popular front-end frameworks in web design. It allows developers to build mobile sites first and quickly. Bootstrap allows smart use of standard HTML5, CSS3 and Javascript trios. It is currently used by more than 6 million web sites. Bootstrap version 4 has more new and convenient features than before.

Free set of Bootstrap 3 Theme worth nearly $ 1000 ″]

New features

1. Sass instead of LESS

Previously Bootstrap uses LESS as its main CSS preparation tool, but for Bootstrap version 4, style rules will be restructured for Sass, much more popular among Frontend developers, available The facility contributes greatly, often easier to use and offers even more possibilities. Thanks to the powerful previous Libsass Sass Comp written in C / C ++ Bootstrap 4 will compile much faster than before.

2. New Grid Tier for smaller screens

Bootstrap has a sophisticated responsive grid system that allows developers to target devices with different viewing modes. Bootstrap 3 currently has 4 grid layers for columns, .col-xs-XX for mobile phones, .col-sm-XX for tablets, .col-md-XX for desktops and .col-lg- XX for larger desktops. Bootstrap 4 will enhance the grid system with the fifth system, enabling developers to target smaller devices below the 480px view width.

The new grid has taken the name of the previous smallest class and pushed the current names of the grid steps up one step. In Bootstrap 4, large desktop computers will use the .col-xl-XX class selector. It is important to know that despite the new name, they did not add a new layer to the larger screens that add to the smaller screens.

3. Introduce relative CSS units

Bootstrap 4 has finally dropped support for IE 8. It's really a smart step because it allows them to get rid of annoying polyfill and convert to relative CSS units. Instead of pixels, the new major release will use REM and EM to allow responsive typography on Bootstrap sites. This will also increase readability and make websites more accessible to users who are disabled.

4. New Bootstrap card

The development team decided to incorporate some of the previous elements of the Bootstrap user interface, so they decided to introduce a new UI component called Cards. Cards will replace previous wells, thumbnails, and panels and will provide users with a more streamlined workflow. Don't worry, cards will keep familiar elements, such as titles, headers and footers of wells, thumbnails and panels.

Because cards will be more flexible than current UI components, they will allow a larger space for creative deployment.

5. New Reboot module

The new Reboot module replaces the normalize.css reset file earlier. It does not abandon it but vice versa, it builds more rules on it. The goal of the move is to include all common CSS selectors and types of reset in a simple, easy-to-use SCSS file.

It's good to know that the re-set types have just set box-sizing CSS attribute intelligence to border-box on the <html> element, thus inherited by each child element on the page. New style rules make layout more manageable.

6. Opt-in Flexbox Support

Bootstrap 4 can take advantage of the Flexbox CSS3 Layout, however – because IE 9 does not support the flexbox module – the default version of Bootstrap 4 instead of using float and display CSS properties to implement fluid layout.

Flexbox with an easy-to-use layout, can be excellently used in responsive design, as it provides a flexible flexible container that can be expanded or shrunk to fill the available space in the best way. Only use opt-in flexbox if you do not need to provide support for IE9.

7. Customize variables reasonably

All Sass variables used in Bootstrap release 4 are included in a file called _variables.scss, which will significantly streamline the development process. You don't have to do anything other than copying the settings from one file to another named _custom.scss to change the default values.

You can customize many things like color, spacing, link styles, typography, tables, grid breakpoints and containers, column number and gutter width, and more.

8. The new utility Classes for Spacing

Bootstrap 3 already has many practical utility classes like classes that change floating or clearfix, but Bootstrap 4 adds. New spacing classes allow developers to quickly change padding and margin on their websites.

The syntax for new classes is quite simple, for example: adding a class .ma-0 links a rule that sets the margin to 0 on all sides of the given element (margin-all-0). While margin uses the m-prefix prefix, padding is styled with the p-prefix prefix.

9. Tooltips and Popovers are provided by Tether

In Bootstrap 4 tooltips and popovers use the super-fast Tether library, a navigation tool that allows you to keep an absolute positioning element right next to another element on the same page. This means that Tooltips and Popovers will be automatically placed properly on Bootstrap sites 4.

Don't forget that Tether is a third-party JavaScript library, you need to include it in HTML before your bootstrap.js file.

10. The JavaScript plugins are refactored

The development team has restructured each JavaScript plugin for Bootstrap version 4 with ES6.

Bootstrap 4 has also undergone other JavaScript improvements, such as option type testing, general analysis methods and UMD support, all of which will work together to make the most popular interface framework run smoothly. howl more than ever.

Conclude

Through this article, I would like to introduce to you some interesting new features and highlights of Bootstrap 4. Hope this article will help everyone.

Refer:

https://www.hongkiat.com/blog/boostrap-4-best-features/

Share the news now

Source : viblo.asia