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

Editor to share with you how bootstrap solves browser compatibility. I hope you will get something after reading this article. Let's discuss it together.

Bootstrap, from Twitter, is by far the most popular front-end framework. Bootstrap is based on HTML, CSS, JavaScript, it is simple and flexible. In the process of development, we only need to add the corresponding class to the DOM element to call it, which makes Web development faster.

Bootstrap solves browser compatibility: add code at the bottom of the HTML file tag to introduce html5shiv.min.js and respond.min.js files.

Specific implementation method:

1. Mobile device support

2. Support on PC side

Note: Windows supports IE 8-11.

IE8 is supported. However, many CSS3 attributes and HTML5 elements are not supported. For example, the responsive layout of Bootstrap is achieved through CSS3's media query (Media Query) function, matching different styles according to different resolutions, IE8 browsers do not support this excellent CSS3 feature. Bootstrap has made it clear in the development documentation that IE8 needs Respond.js cooperation to support media query (media query). According to the official documentation, the following code is added at the bottom of the tag of the HTML file:

Note: html5shiv.min.js file allows browsers that do not fully support html5 to support html5 tags; respond.js file enables IE8 to support media query (media query).

However, open the page in the IE8 browser and find that the compatibility problem has not been solved. By consulting the relevant materials, summarize a few points for attention (the key to achieving the effect):

Local debugging requires Web Server (such as IIS, Apache,Nginx). Simply opening files locally cannot see the compatibility effect.

If you find that respond.js and Bootstrap have been referenced and still have no effect, please check to see if your Bootstrap uses the CDN file.

Bootstrap3 requires Html5 document declaration

The Jquery version needs to be below 2.0.

The template code is as follows:

After reading this article, I believe you have some understanding of "how bootstrap solves browser compatibility". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.