Baru-baru ini, saya telah menggunakan Bootstrap, kerangka kerja front-end yang sangat baik. Kerangka kerja ini sangat kuat. Kerangka kerja termasuk menu drop-down, grup tombol, menu drop-down tombol, navigasi, bilah navigasi, remah roti, paging, pengaturan huruf, thumbnail, kotak dialog peringatan, bilah kemajuan, objek media, dll. Bootstrap telah ditentukan sebelumnya. Saat kami membuat halaman web, kami hanya perlu secara langsung memanggil CSS di dalam.
Bootstrap adalah tata letak yang responsif, Anda bisa mendapatkan pengalaman tata letak yang sangat baik di komputer layar lebar, komputer biasa, tablet, dan ponsel. Tata letak responsif ini dicapai melalui fungsi kueri media CSS3, mencocokkan gaya yang berbeda sesuai dengan resolusi yang berbeda. IE8 Browser tidak mendukung fitur CSS3 yang luar biasa ini. Bootstrap menulis dalam dokumen pengembangan cara menggunakannya untuk kompatibilitas IE8. Jika Anda ingin kompatibel dengan IE6 dan IE7, Anda dapat mencari bsie (bootstrap2)
Bootstrap jelas tidak sesempurna Chrome, Firefox, dan IE11 di IE8. Beberapa komponen tidak dijamin sepenuhnya kompatibel, tetapi mereka masih perlu diretas.
1. Gunakan deklarasi html5
<! Doctype html> Tidak ada spasi di sini <html>
Catatan: Menulis <! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> tidak layak
2. Tambahkan tag meta
Konfirmasikan versi IE dari halaman ini untuk ditampilkan
<meta http-equiv = "x-ua-kompatibel" konten = "ie = edge, chrome = 1" /> <meta http-equiv = "x-ua-kompatibel" konten = "ie = 9" />
Catatan: Bootstrap tidak mendukung mode kompatibilitas IE. Untuk mengaktifkan browser IE untuk menjalankan mode rendering terbaru, tag di atas akan ditambahkan ke halaman. IE = Edge berarti memaksa penggunaan kernel IE terbaru, dan chrome = 1 berarti jika plug-in browser untuk IE6/7/8 dan versi lainnya dipasang.
3. Perkenalkan file bootstrap
Salinan kode adalah sebagai berikut: <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet">
4. Perkenalkan html5shiv.min.js dan response.min.js
Buat browser yang tidak (sepenuhnya) mendukung tag html5 "dukungan" ke tag html5
<!-[Jika LT IE 9]> <Script src = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/respond.min.min.js"> </script> <! [Endif]->
5. Tambahkan 1.x Versi Perpustakaan JQuery
Salinan kode adalah sebagai berikut: <skrip src = "js/bootstrap/jQuery-1.12.0.min.js"> </script>
6. Diuji berdasarkan IE8, saya menemukan masalah yang tidak didukung oleh placeholder. Berikut ini adalah solusi untuk solusi yang IE mendukung placeholder. JQuery yang dikutip dalam artikel ini dilewati oleh tes 1.12.0. Silakan merujuk ke jQuery terlebih dahulu.
<type script = "Text/JavaScript" src = "js/bootstrap/jquery-1.12.0.min.js"> </script> <script src = "bootstrap/js/bootstrap.min.js"> </script>
Anda juga dapat menggunakan versi jQuery lainnya untuk memperkenalkan
[kode] <script type = "text/javaScript" src = "js/bootstrap/jQuery.placeHolder.js"> </script>
Kemudian tambahkan kode ke file
<script type = "text/javascript"> $ (function () {$ ('input, textarea'). placeholder ();}); </cript>Ringkasan kode adalah sebagai berikut:
<!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" konten = "IE = edge, chrome = 1"/> <meta name = "author" content = "zhy"/> <iteme> ie8 </iteme> <tautan rel = "stylesheet" href = "css/bootstrap/bootstrap.min.css"> <!-[if lte ie 9./bootstrap.min =css "> <!-[if lte ie 9] </bootstrap.min.css"> <!-[if lte ie 9] </bootstrap.min.css "> <!-[if lte ie 9] </bootstrap.min.css"> <!-[if lte ie 9] </bootsrap. <skrip src = js/bootstrap/html5shiv.min.js "> </script> <! [endif]-> <skrip src =" js/bootstrap/jQuery-1.12.0.min.js "> </script> <skrip src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
Catatan:
1. Pernyataan untuk menentukan versi IE di bawah IE
<!-[Jika LTE IE 6]> <! [Endif]-> Ie6 dan di bawah ini terlihat <!-[jika LTE IE 7]> <! [Endif]-> IE7 dan di bawah ini terlihat <!-[jika IE 6] <! [Endif]-> hanya IE6 versi IE6 terlihat <!-[jika LTE IE 8] <! 7]> <! [Endif]->
IE7 dan versi yang lebih besar dari IE7 terlihat
LTE: Apakah singkatan kurang dari atau sama dengan, yang berarti kurang dari atau sama dengan.
LT: Apakah singkatan kurang dari, yang berarti kurang dari.
GTE: adalah singkatan yang lebih besar dari atau sama dengan, yang berarti lebih besar dari atau sama dengan.
GT: Apakah singkatan yang lebih besar dari, yang berarti lebih besar dari.
Lai : Itu berarti tidak sama, sama dengan simbol penilaian yang tidak setara dalam javascript
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.