recherche

Maison >interface Web >js tutoriel >bootstrap3 est compatible avec le navigateur IE8 ! _compétences javascript

bootstrap3 est compatible avec le navigateur IE8 ! _compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:02:411941parcourir

Récemment, j'utilise bootstrap, un excellent framework front-end. Ce framework est très puissant. Le framework comprend des menus déroulants, des groupes de boutons, des menus déroulants de boutons, une navigation, des barres de navigation, un fil d'Ariane, une pagination, une mise en page. , les vignettes, les boîtes de dialogue d'avertissement, les barres de progression, les objets multimédias, etc., le bootstrap ont été prédéfinis. Lorsque nous créons une page Web, il suffit d'appeler directement le CSS à l'intérieur de

.

Bootstrap est une mise en page réactive. Vous pouvez obtenir une excellente expérience de mise en page sur des ordinateurs à écran large, des ordinateurs ordinaires, des tablettes et des téléphones mobiles. Cette mise en page réactive est obtenue grâce à la fonction Media Query de CSS3, qui fait correspondre différents styles selon différentes résolutions. Le navigateur IE8 ne prend pas en charge cette excellente fonctionnalité CSS3. Bootstrap a écrit dans la documentation de développement comment l'utiliser pour être compatible avec IE8. Si vous souhaitez être compatible avec IE6 et IE7, vous pouvez rechercher bsie (bootstrap2)

.

Bootstrap dans IE8 n'est certainement pas aussi parfait que Chrome, Firefox et IE11. Il n'est pas garanti que certains composants soient entièrement compatibles et vous devez quand même pirater

.

1. Utilisez la déclaration html5 

<!DOCTYPE html>
这里不可以有空格
<html>

Remarque : Il n'est pas possible d'écrire 7fff146052115a4c77cf2b9aac8c77f3

4. Présentez html5shiv.min.js et respons.min.js

Laissez les navigateurs qui ne prennent pas (entièrement) en charge html5 « prendre en charge » la balise html5

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

5. Ajouter la bibliothèque Jquery version 1.X

Copier le code Le code est le suivant :
5a9ff99d2cbbf7fe4b408ff50a96c8222cacc6d41bbb37262a98f745aa00fbf0

6. Lors des tests sous IE8, un problème a été détecté : l'espace réservé n'est pas pris en charge. Voici une méthode pour résoudre le problème selon lequel IE prend en charge l'espace réservé. Le jquery cité dans cet article est 1.12.0 et a réussi. test. Première citation 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 de jquery puis introduire

[code]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0
Ajoutez ensuite du code au fichier 

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

Le code se résume ainsi : 

<!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>

Remarque :

1. Déclaration pour déterminer la version d'IE sous IE

<!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见
 
<!--[if lte IE 7]>
<![endif]-->
IE7及其以下版本可见
 
<!--[if IE 6]>
<![endif]-->
只有IE6版本可见
 
<![if !IE]>
<![endif]>
除了IE以外的版本
 
<!--[if lt IE 8]>
<![endif]-->
IE8以下的版本可见
 
<!--[if gte IE 7]>
<![endif]-->

Les versions IE7 et supérieures sont visibles
lte : C'est l'abréviation de Inférieur ou égal à, qui signifie inférieur ou égal à.
lt : C'est l'abréviation de Less than, qui signifie moins que.
gte : C'est l'abréviation de Supérieur ou égal à, qui signifie supérieur ou égal à.
gt : C'est l'abréviation de Greater than, qui signifie supérieur à.
!: Cela signifie pas égal à, ce qui est identique au symbole de jugement d'inégalité en JavaScript

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：BOM_connaissance de base de javascriptArticle suivant：BOM_connaissance de base de javascript

Articles Liés

Voir plus