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

This article is about how bootstrap solves browser compatibility issues. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layout, mobile device-first WEB projects.

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.

Let's move on to the topic and talk about Bootstrap 3 browser compatibility issues and their corresponding solutions:

1. Mobile device support

2. Support on PC side

Note: Windows supports IE 8-11.

Please refer to browser support for detailed Bootstrap 3 support on each browser.

As shown above, 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 document, the author adds the following code 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, when you open the page in the IE8 browser, you find that the compatibility problem has not been resolved (pit, pit). By consulting the relevant materials, the author summarizes several points for attention (the key to the realization of the effect):

(1) Web Server (such as IIS, Apache,Nginx) is required for local debugging. Simply opening files locally cannot see the compatibility effect.

(2) if you find that you have quoted respond.js and Bootstrap, but there is no effect, please check whether your Bootstrap uses the CDN file.

(3) Bootstrap3 requires Html5 document declaration

(4) the Jquery version needs to be below 2.0.

The template code is as follows:

Thank you for reading! This is the end of the article on "how to solve browser compatibility problems with bootstrap". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.