Vor kurzem habe ich Bootstrap verwendet, ein ausgezeichnetes Front-End-Framework. Dieser Rahmen ist sehr mächtig. Das Framework umfasst Dropdown-Menüs, Knopfgruppen, Taste-Dropdown-Menüs, Navigation, Navigationsstangen, Semmelbrösel, Paging, Typenett, Miniaturansichten, Warndialogfelder, Fortschrittsbalken, Medienobjekte usw. Bootstrap wurde vordefiniert. Wenn wir eine Webseite erstellen, müssen wir das CSS nur direkt innen anrufen.
Bootstrap ist ein reaktionsschnelles Layout. Sie können ein sehr hervorragendes Layout -Erlebnis auf Breitbildcomputern, gewöhnlichen Computern, Tablets und Mobiltelefonen erhalten. Dieses reaktionsschnelle Layout wird durch die Medienabfragefunktion von CSS3 erreicht, die unterschiedliche Stile entsprechend unterschiedlichen Auflösungen entspricht. IE8 Browser unterstützt diese hervorragende CSS3 -Funktion nicht. Bootstrap schrieb im Entwicklungsdokument, wie man es für die IE8 -Kompatibilität verwendet. Wenn Sie mit IE6 und IE7 kompatibel sein möchten, können Sie nach Bsie (Bootstrap2) suchen.
Bootstrap ist definitiv nicht so perfekt wie Chrom, Firefox und IE11 in IE8. Einige Komponenten sind nicht garantiert vollständig kompatibel, müssen aber noch gehackt werden.
1. Verwenden Sie die HTML5 -Deklaration
<! DocType html> Es gibt hier keine Räume <html>
Hinweis: Schreiben <! DocType html public "-// w3c // dtd html 4.01 // en" http://www.w3.org/tr/html4/strict.dtd "> ist nicht machbar
2. Fügen Sie Meta -Tags hinzu
Bestätigen Sie die IE -Version dieser Seite, die angezeigt wird
<meta http-äquiv = "x-ua-kompatible" content = "ie = edge, Chrome = 1" /> <meta http-äquiv = "x-ua-kompatible" content = "IE = 9" />
Hinweis: Bootstrap unterstützt den IE -Kompatibilitätsmodus nicht. Um es dem IE -Browser zu ermöglichen, den neuesten Rendering -Modus auszuführen, wird das obige Tag zur Seite hinzugefügt. IE = Edge bedeutet, die Verwendung des neuesten IE-Kernels zu erzwingen, und Chrome = 1 bedeutet, ob das Browser-Plug-In für IE6/7/8 und andere Versionen installiert ist.
3.. Verwalten Sie die Bootstrap -Datei
Die Codekopie lautet wie folgt: <Link href = "CSS/Bootstrap/Bootstrap.min.css" rel = "Stylesheet">
V.
Machen Sie Browser, die HTML5 -Tags nicht (vollständig) unterstützen, "Unterstützung" zu HTML5 -Tags "Support"
<!-[wenn lt IE 9]> <script src = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/reaging.min.js"> </script> <[endif]->->->->->->->->->->->->->->->->->->
5. Fügen Sie 1.x Version der JQuery Library hinzu
Die Codekopie lautet wie folgt: <script src = "js/bootstrap/jquery-1.12.0.min.js"> </script>
6. Unter IE8 getestet und fand ein Problem, das Platzhalter nicht unterstützt. Das Folgende ist eine Lösung für die Lösung, die der IE den Platzhalter unterstützt. Die in diesem Artikel zitierte JQuery wurde durch den Test 1.12.0 bestanden. Bitte beziehen Sie sich zuerst bei JQuery.
<script type = "text/javaScript" src = "js/bootstrap/jquery-1.12.0.min.js"> </script> <script src = "bootstrap/js/bootstrap.min.js"> </script>
Sie können auch andere JQuery -Versionen verwenden, um vorzustellen
[Code] <script type = "text/javascript" src = "js/bootstrap/jQuery.placeholder.js"> </script>
Fügen Sie dann den Code der Datei hinzu
<script type = "text/javaScript"> $ (function () {$ ('Eingabe, textarea'). placeholder ();}); </script>Die Codezusammenfassung lautet wie folgt:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = Gerätebraute, benutzerkalierbar = no, initial-scale = 1,0, maximum-actp-actp-actp-actp-actp-actp-actp-actp-c-c-c-c-c-cal-scalable = 1,0> <meximum-actp-actp-actp-actp- content = "IE = Edge, Chrome = 1"/> <meta name = "Autor" content = "zhy"/> <title> ie8 </title> <link rel = "styleSheet" href = "css/bootstrap/bootstrap.min.css"> <! <script src = js/bootstrap/html5shiv.min.js "> </script> <! [endif]-> <script src =" js/bootstrap/jQuery.12.0.min.js "> </script> <script src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
Notiz:
1. Aussagen zur Ermittlung der IE -Version unter IE
<!-[Wenn lte ie 6]> <! [endif]-ie6 und unten sichtbar <!-[wenn lte ie 7]> <! [endif]-> ie7 und unten sind sichtbar <!-[Wenn dh 6]> <! [endif]-> nur dh s6-Vergleiche sind sichtbar <! 7]> <! [Endif]->
IE7 und Versionen, die größer als IE7 sichtbar sind
LTE: Ist die Abkürzung von weniger als oder gleich, was weniger als oder gleich ist.
LT: Ist die Abkürzung von weniger als, was weniger als.
GTE: Ist die Abkürzung von größer als oder gleich, was größer als oder gleich ist.
GT: Ist die Abkürzung von größer als, was bedeutet, dass größer als.
! : Es bedeutet nicht gleich, das gleiche wie das nicht gleiche Beurteilungssymbol in JavaScript
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.