Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the functions of bootstrap". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what are the functions of bootstrap" can help you solve the problem.

Twitter Bootstrap is currently the most popular front-end framework. It enables developers to quickly build mobile-first and responsive websites. Bootstrap makes it possible to skillfully use the standard HTML5,CSS3 and Javascript front-end trio. So far, more than 6 million websites are using it.

1. Replace LESS with sass

So far, Bootstrap has used LESS as the predecessor of its main CSS, but for new major releases, style rules will be refactored to Sass, which is more popular with front-end developers, has a large contributor base, and is generally easier to use and provide more functionality. Possibility. Thanks to the powerful Libsass Sass compiler written in C / C + + Bootstrap 4, the compilation speed is much faster than before.

two。 New grid layer for smaller screens

Bootstrap has a complete responsive grid system that allows developers to use different viewport positioning devices. Bootstrap 3 currently has four grid classes for columns. Col-xs-XX (for mobile phones). Col-sm-XX tablet. Col-md-XX (for desktops), and. Col-lg-XX is suitable for large desktops. Bootstrap 4 will enhance the grid system with a fifth grid, which will help developers position smaller devices below the width of the 480px viewport.

The new grid class takes the previous smallest grid name and pushes up the name of the current grid layer. In Bootstrap 4, large desktops will be used. Col-xl-XX class selector. It is important to know that although new names are used, they do not add new classes for super-large screens, but for ultra-small screens.

3. Introduction of relative CSS units

Bootstrap 4 eventually abandoned support for Internet Explorer 8. This is indeed a sensible step because it allows them to get rid of the pesky polyfills and convert it to a relative CSS unit. The new major version will use REM and EM instead of pixels, making it possible to implement responsive typesetting on Bootstrap sites. This will also improve readability and make it easier for disabled users to access the site.

4. A brand new guide card

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

Because cards will be more flexible than current UI components, they will leave more room for creative implementations. Some pioneers have experimented with bootstrap cards on Codepen. You can check them out or create your own card.

5. New restart module

The new restart module replaces the previous normalize.css reset file. It won't abandon it. Instead, it establishes more rules on it. The goal is to include all common CSS selectors and reset styles in a single, easy-to-use SCSS file. If you want to better understand how the new module works, you can check the source code here.

It's nice to know that the new reset style cleverly sets the box-size CSS attribute on the element to border-box, so it is inherited by each child element on the page. The new style rules make responsive layouts easier to manage. If you want to experience the difference between content boxes and border layout types, take a look at this convenient demonstration provided by CSS-Tricks.com (it's not created for Bootstrap 4, it just shows how resizing boxes is generally effective).

6. Choose to join Flexbox support

Bootstrap 4 makes it possible to take advantage of CSS3's Flexbox layout, but-Internet Explorer 9 does not support flexbox modules-the default version of Bootstrap 4 instead uses the float and display CSS attributes for a smooth layout.

Flexbox has an easy-to-use layout and can be well used in responsive designs because it provides a flexible container that can expand or shrink itself to fill available space in the best way. Use only the function selected in Flexbox if you don't need to provide support for IE9 to do.

7. Simplified variable customization

All Sass variables used in the new version of Bootstrap are contained in a file called _ variables.scss, which greatly simplifies the development process. You do not need to do anything other than to copy the settings in this file to another file named _ custom.scss to change the default value.

You can customize many things, such as color, spacing, link style, layout, tables, grid breakpoints and containers, column numbers and binding line width, etc.

Bootstrap 3 already has many utility classes, such as changing floating classes or clearfix's utility classes, but Bootstrap 4 has added more utility classes. The new spacing category allows developers to quickly change padding and margins on their Web sites.

The syntax of the new class is very simple, such as adding. The ma-0 class links to a style rule that sets all margins of a given element (margin-all-0) to 0. Margins use the m-prefix, while padding uses the p-prefix to set the style. In the development documentation, you can view all the new interval utility classes.

9. Tether-driven tooltips and pop-up windows

In Bootstrap 4, tooltips and popups use the supercool Tether library, a positioning engine that keeps absolutely positioned elements next to another element on the same page. This means that tooltips and pop-ups will automatically be placed correctly on the Bootstrap 4 website.

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

10. ReFactor the JavaScript plug-in

The development team refactored each new version of the JavaScript plug-in using EcmaScript 6. They intend to improve the front-end experience by intelligently leveraging the latest specifications and latest enhancements.

The new Bootstrap 4 has also undergone other JavaScript improvements, such as option type checking, general disassembly methods, and UMD support, which will work together to make the most popular front-end framework run more smoothly than ever before.

This is the end of the content about "what are the functions of bootstrap". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.