في الآونة الأخيرة ، كنت أستخدم Bootstrap ، وهو إطار أمامي ممتاز. هذا الإطار قوي للغاية. يشتمل الإطار على القوائم المنسدلة ، ومجموعات الأزرار ، وقوائم المنسدلة للزر ، والملاحة ، وقضبان التنقل ، وتفتيت الخبز ، والترحيل ، والأنشاش ، والأصابع المصغرة ، وصناديق الحوار تحذير ، وأشرطة التقدم ، وكائنات الوسائط ، وما إلى ذلك. عندما نقوم بإنشاء صفحة ويب ، نحتاج فقط إلى الاتصال مباشرة بـ CSS في الداخل.
Bootstrap عبارة عن تصميم مستجيب ، يمكنك الحصول على تجربة تخطيط ممتازة للغاية على أجهزة الكمبيوتر العريضة وأجهزة الكمبيوتر العادية والأجهزة اللوحية والهواتف المحمولة. يتم تحقيق هذا التصميم المستجيب من خلال وظيفة الاستعلام عن الوسائط لـ CSS3 ، مما يتوافق مع أنماط مختلفة وفقًا لقرارات مختلفة. لا يدعم IE8 Browser ميزة CSS3 الممتازة. كتب Bootstrap في وثيقة التطوير كيفية استخدامه لتوافق IE8. إذا كنت تريد أن تكون متوافقًا مع IE6 و IE7 ، فيمكنك البحث عن BSIE (bootstrap2)
Bootstrap بالتأكيد ليست مثالية مثل Chrome و Firefox و IE11 في IE8. لا تضمن بعض المكونات أن تكون متوافقة تمامًا ، لكنها لا تزال بحاجة إلى اختراقها.
1. استخدم إعلان HTML5
<! doctype html> لا توجد مسافات هنا <html>
ملاحظة: الكتابة <! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"
2. إضافة علامات التعريف
قم بتأكيد إصدار IE من هذه الصفحة لعرضه
<meta http-equiv = "x-ua- conmptible" content = "ie = edge ، chrome = 1" /> <meta http-equiv = "x-ua-conclible" content = "ie = 9" />
ملاحظة: لا يدعم Bootstrap وضع التوافق IE. من أجل تمكين متصفح IE لتشغيل أحدث وضع عرض ، سيتم إضافة العلامة أعلاه إلى الصفحة. IE = EDGE تعني فرض استخدام أحدث kernel ، ويعني Chrome = 1 إذا تم تثبيت المكون الإضافي للمتصفح لـ IE6/7/8 والإصدارات الأخرى.
3. تقديم ملف bootstrap
نسخة الكود كما يلي: <link href = "css/bootstrap/bootstrap.min.css" rel = "STYLESHEET">
4.
قم بعمل متصفحات لا تدعم (بالكامل) علامات HTML5 "دعم" لعلامات HTML5
<!-[إذا كان lt ie 9]> <script src = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/reversion.min.js"> </script> <! endif]->
5. أضف 1.x إصدار من مكتبة jQuery
نسخة الكود كما يلي: <script src = "js/bootstrap/jquery -1.12.0.min.js"> </script>
6. تم اختباره بموجب IE8 ، لقد وجدت مشكلة لا يتم دعمها. ما يلي هو حل للحل الذي يدعمه IE. تم تمرير jQuery المقتبس في هذه المقالة بواسطة اختبار 1.12.0. يرجى الرجوع إلى jQuery أولاً.
<script type = "text/javaScript" src = "js/bootstrap/jquery -1.12.0.min.js"> </script> <script src = "bootstrap/js/bootstrap.min.js"> </script>
يمكنك أيضًا استخدام إصدارات jQuery الأخرى لتقديمها
[رمز] <script type = "text/javaScript" src = "js/bootstrap/jquery.placeholder.js"> </script>
ثم أضف الرمز إلى الملف
<script type = "text/javaScript"> $ (function () {$ ('input ، textarea').ملخص الكود كما يلي:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device ، user-scalable = no ، scale scale = 1.0 ، maximum-scale = 1.0 ، minimp-scale = content = "ie = edge ، chrome = 1"/> <meta name = "upert" content = "zhy"/> <title> ie8 </title> <link rel = "stylesheet" src = js/bootstrap/desponse.min.js "> </script> <script src = js/bootstrap/html5shiv.min.js"> </script> <! src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
ملحوظة:
1. بيانات لتحديد إصدار IE تحت IE
<!-[إذا كان lte ie 6]> <! 7]> <! [endif]->
IE7 والإصدارات أكبر من IE7 مرئية
LTE: هل اختصار أقل من أو يساوي ، وهو ما يعني أقل من أو يساوي.
LT: هل اختصار أقل من ، وهو ما يعني أقل من.
GTE: هل اختصار أكبر من أو يساوي ، وهو ما يعني أكبر من أو يساوي.
GT: هو اختصار أكبر من ، وهو ما يعني أكبر من.
! : هذا لا يساوي ، مثل رمز الحكم غير المسكوك في جافا سكريبت
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.