Récemment, j'utilise Bootstrap, un excellent cadre frontal. Ce cadre est très puissant. Le cadre comprend les menus déroulants, les groupes de bouton, les menus déroulants de bouton, la navigation, les barres de navigation, la chapelure, la pagination, la composition, les vignettes, les boîtes de dialogue d'avertissement, les barres de progression, les objets multimédias, etc. Bootstrap a été prédéfini. Lorsque nous fabriquons une page Web, nous devons simplement appeler directement le CSS à l'intérieur.
Bootstrap est une disposition réactive, vous pouvez obtenir une très excellente expérience de mise en page sur des ordinateurs écrans, des ordinateurs ordinaires, des tablettes et des téléphones portables. Cette disposition réactive est obtenue grâce à la fonction de requête multimédia de CSS3, correspondant à différents styles selon différentes résolutions. Le navigateur IE8 ne prend pas en charge cette excellente fonctionnalité CSS3. Bootstrap a écrit dans le document de développement comment l'utiliser pour la compatibilité IE8. Si vous voulez être compatible avec IE6 et IE7, vous pouvez rechercher BSIE (bootstrap2)
Bootstrap n'est certainement pas aussi parfait que Chrome, Firefox et IE11 dans IE8. Certains composants ne sont pas garantis pour être entièrement compatibles, mais ils doivent toujours être piratés.
1. Utilisez la déclaration HTML5
<! Doctype html> Il n'y a pas d'espaces ici <html>
Remarque: Écriture <! Doctype html public "- // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> n'est pas possible
2. Ajouter des balises de méta
Confirmez la version IE de cette page à afficher
<meta http-equiv = "x-ua-compatible" content = "ie = edge, chrome = 1" /> <meta http-equiv = "x-ua compatible" contenu = "ie = 9" />
Remarque: Bootstrap ne prend pas en charge le mode de compatibilité IE. Afin de permettre au navigateur IE d'exécuter le dernier mode de rendu, la balise ci-dessus sera ajoutée à la page. IE = Edge signifie forcer l'utilisation du dernier noyau IE, et Chrome = 1 signifie si le plug-in du navigateur pour IE6 / 7/8 et d'autres versions sont installés.
3. Introduire un fichier bootstrap
La copie de code est la suivante: <link href = "css / bootstrap / bootstrap.min.css" rel = "Stylesheet">
4. Introduire html5shiv.min.js et réponse.min.js
Faire des navigateurs qui ne prennent pas (entièrement) en charge les balises HTML5 "Support" aux balises HTML5
<! - [Si lt ie 9]> <script src = "js / bootstrap / html5shiv.min.js"> </ script> <script src = "js / bootstrap / répond.min.js"> </ script> <! [endIF] ->
5. Ajouter la version 1.x de la bibliothèque jQuery
La copie de code est la suivante: <script src = "js / bootstrap / jQuery-1.12.0.min.js"> </ script>
6. Testé sous IE8, j'ai trouvé un problème que l'espace réservé n'est pas pris en charge. Ce qui suit est une solution à la solution qui prend en charge l'espace réservé. Le jQuery cité dans cet article a été passé par le test 1.12.0. Veuillez d'abord vous référer à JQuery.
<script type = "text / javascript" src = "js / bootstrap / jquery-1.12.0.min.js"> </ script> <script src = "bootstrap / js / bootstrap.min.js"> </ script>
Vous pouvez également utiliser d'autres versions jQuery pour introduire
[Code] <Script Type = "Text / JavaScript" Src = "JS / Bootstrap / jQuery.PlaceHolder.js"> </ Script>
Puis ajoutez le code au fichier
<script type = "text / javascript"> $ (function () {$ ('input, textarea'). placeholder ();}); </script>Le résumé du code est le suivant:
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta name = "vision" contenu = "width = device-width, user-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0"> <meta http-eaviv = "x-up-cale = 1.0"> <meta http-eaviv = "x-u-tale" Content = "ie = edge, chrome = 1" /> <meta name = "auteur" content = "zhy" /> <tight> ie8 </title> <link rel = "stylesheet" href = "css / bootstrap / bootstrap.min.css"> <! - [if lte ie 9]> <script src = js / bootstrap / répond.min. <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. Instructions pour déterminer la version IE sous IE
<! - [Si LTE IE 6]> <! [ENDIF] -> IE6 et ci-dessous sont visibles <! - [Si LTE IE 7]> <! [ENDIF] -> IE7 et ci-dessous sont visibles <! - [IF IE 6]> <! [EDIF] -> SEULES IE6 Les versions sont visibles <! 7]> <! [Endif] ->
IE7 et les versions plus grandes que IE7 sont visibles
LTE: est l'abréviation de moins ou égale à, ce qui signifie inférieur ou égal à.
LT: est l'abréviation de moins que, ce qui signifie moins que.
GTE: est l'abréviation de plus ou égale à, ce qui signifie supérieur ou égal à.
GT: est l'abréviation de plus grande que, ce qui signifie supérieur à.
! : Cela signifie pas égal, le même que le symbole de jugement non égal en javascript
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.