Recently, I have been using bootstrap, an excellent front-end framework. This framework is very powerful. The framework includes drop-down menus, button groups, button drop-down menus, navigation, navigation bars, breadcrumbs, paging, typesetting, thumbnails, warning dialog boxes, progress bars, media objects, etc. Bootstrap has been predefined. When we make a web page, we just need to directly call the css inside.
bootstrap is a responsive layout, you can get a very excellent layout experience on widescreen computers, ordinary computers, tablets, and mobile phones. This responsive layout is achieved through the Media Query function of CSS3, matching different styles according to different resolutions. IE8 browser does not support this excellent Css3 feature. Bootstrap wrote 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 are not guaranteed to be fully compatible, but they still need to be hacked.
1. Use html5 declaration
<!DOCTYPE html>There are no spaces here<html>
Note: Writing <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> is not feasible
2. Add meta tags
Confirm the IE version of this page to display
<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 IE compatibility mode. In order to enable the IE browser to run the latest rendering mode, the above tag will be added to the page. IE=edge means force the use of the latest IE kernel, and chrome=1 means if the browser plug-in for IE6/7/8 and other versions is installed.
3. Introduce bootstrap file
The code copy is as follows:<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
4. Introduce html5shiv.min.js and response.min.js
Make browsers that do not (fully) support html5 tags "support" to 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 1.X version of Jquery library
The code copy is as follows: <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
6. Tested under IE8, I found a problem that placeholder is not supported. The following is a solution to the solution that IE supports placeholder. The jquery quoted in this article was passed by the 1.12.0 test. Please refer to jquery 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
[code]<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 summary is as follows:
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta name="author" content="zhy" /> <title>ie8</title> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"> <!--[if lte IE 9]> <script src=js/bootstrap/respond.min.js"></script> <script src=js/bootstrap/html5shiv.min.js"></script> <![endif]--> <script src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script></head><body></body></html>
Note:
1. Statements for determining IE version under IE
<!--[if lte IE 6]><![endif]-->IE6 and below are visible<!--[if lte IE 7]><![endif]-->IE7 and below are visible<!--[if IE 6]><![endif]-->Only IE6 versions are visible<!--[if lte IE 8]><![endif]-->Visible<!--[if gte IE 7]><![endif]-->
IE7 and versions larger than IE7 are visible
lte: is the abbreviation of Less than or equal to, which means less than or equal to.
lt: is the abbreviation of Less than, which means less than.
gte: is the abbreviation of Greater than or equal to, which means greater than or equal to.
gt: is the abbreviation of Greater than, which means greater than.
! : It means not equal, the same as the non-equal judgment symbol in javascript
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.