Bootstrap3 is compatible with IE 8 and bootstrap3ie8

Source: Internet
Author: User

Bootstrap3 is compatible with IE 8 and bootstrap3ie8

We are using the excellent front-end framework of bootstrap recently. This framework is very powerful, the framework contains a drop-down menu, button group, button drop-down menu, navigation bar, navigation bar, breadcrumb, paging, layout, thumbnail, warning dialog box, progress bar, and media objects, bootstrap has been pre-defined. When we create a webpage, we only need to directly call the css in it.

Bootstrap is a responsive layout. You can enjoy excellent layout experience on wide screen computers, normal computers, tablets, and mobile phones. This responsive layout is achieved through the Media Query function of CSS3, and different styles are matched according to different resolutions. The IE8 browser does not support this excellent Css3 feature. Bootstrap writes in the development document how to use it for IE8 compatibility. If you want to be compatible with IE6 and IE7, you can search for bsie (bootstrap2)

Bootstrap is definitely not as perfect as Chrome, Firefox, and IE11 in IE8. Some components do not guarantee full compatibility and require Hack.

1. Use html5 Declaration

<! DOCTYPE html> no space is allowed here 

Note: <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> is not feasible

2. Add meta tags

Are you sure you want to display the IE version of this web page

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /><meta http-equiv="X-UA-Compatible" content="IE=9" />

Note: bootstrap does not support the IE compatibility mode. To enable IE to run the latest rendering mode, add the preceding labels to the page. IE = edge indicates that the latest IE kernel is forcibly used, chrome = 1 indicates that if a browser plug-in for IE6/7/8 or another version is installed, Google Chrome Frame

3. Introduce the bootstrap File

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

4. Introduce html5shiv. min. js and respond. min. js.

Allow browsers that do not (fully) Support html5 to "support" html5 tags

<!--[if lt IE 9]><script src="js/bootstrap/html5shiv.min.js"></script><script src="js/bootstrap/respond.min.js"></script><![endif]-->

5. Add the 1.x Jquery library.

<script src="js/bootstrap/jquery-1.12.0.min.js"></script>

6. Test in IE8 and find a problem where placeholder is not supported. The following is a solution for IE to support placeholder. jquery referenced in this article is passed the test in 1.12.0. jquery is referenced first.

<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script>

You can also use other jquery versions to introduce

<script type="text/javascript" src="js/bootstrap/jquery.placeholder.js"></script>

Then add the code to the file.

<script type="text/javascript">    $(function () {        $('input, textarea').placeholder();    });</script>

The code is summarized as follows:

<!DOCTYPE html>

Note:

1. IE statement

<! -- [If lte IE 6]> <! [Endif] --> IE6 and earlier versions are visible <! -- [If lte IE 7]> <! [Endif] --> IE7 and earlier versions are visible <! -- [If IE 6]> <! [Endif] --> only IE6 is visible <! [If! IE]> <! [Endif]> versions other than IE <! -- [If lt IE 8]> <! [Endif] --> versions earlier than IE8 are visible <! -- [If gte IE 7]> <! [Endif] --> IE7 and Versions later than IE7 are visible

Lte:Is the abbreviation of Less than or equal to, that is, Less than or equal.
Lt:That is, the abbreviation of Less.
Gte:It is short for Greater than or equal to, that is, Greater than or equal.
Gt:That is, the abbreviation of Greater than, which is Greater than the meaning.
! :Is not equal to, and is the same as the non-equal identifier in javascript.

2. css and js related to bootstrap3

: Http://pan.baidu.com/s/1getpDjt

Jquery. placeholder. js file https://github.com/mathiasbynens/jquery-placeholder

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.