เมื่อเร็ว ๆ นี้ฉันใช้ Bootstrap ซึ่งเป็นกรอบการทำงานส่วนหน้ายอดเยี่ยม กรอบนี้มีประสิทธิภาพมาก เฟรมเวิร์กรวมถึงเมนูแบบเลื่อนลง, กลุ่มปุ่ม, เมนูแบบเลื่อนลงปุ่ม, การนำทาง, แถบนำทาง, breadcrumbs, เพจ, การเรียงลำดับ, รูปขนาดย่อ, กล่องโต้ตอบเตือน, แถบความคืบหน้า, วัตถุสื่อ ฯลฯ bootstrap ได้ถูกกำหนดไว้ล่วงหน้า เมื่อเราสร้างหน้าเว็บเราเพียงแค่ต้องโทรหา CSS ภายในโดยตรง
Bootstrap เป็นเค้าโครงที่ตอบสนองได้คุณจะได้รับประสบการณ์เลย์เอาต์ที่ยอดเยี่ยมมากในคอมพิวเตอร์ไวด์สกรีนคอมพิวเตอร์ธรรมดาแท็บเล็ตและโทรศัพท์มือถือ เค้าโครงที่ตอบสนองนี้ทำได้ผ่านฟังก์ชั่นการสืบค้นสื่อของ CSS3 จับคู่สไตล์ที่แตกต่างกันตามความละเอียดที่แตกต่างกัน เบราว์เซอร์ IE8 ไม่รองรับคุณสมบัติ 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 ที่เข้ากันได้" เนื้อหา = "ie = edge, chrome = 1" /> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = 9" />
หมายเหตุ: Bootstrap ไม่รองรับโหมดความเข้ากันได้เช่น เพื่อให้เบราว์เซอร์ IE เรียกใช้โหมดการเรนเดอร์ล่าสุดแท็กด้านบนจะถูกเพิ่มลงในหน้า IE = Edge หมายถึงบังคับให้ใช้เคอร์เนล IE ล่าสุดและ Chrome = 1 หมายถึงหากปลั๊กอินเบราว์เซอร์สำหรับ IE6/7/8 และติดตั้งเวอร์ชันอื่น ๆ
3. แนะนำไฟล์ bootstrap
การคัดลอกรหัสมีดังนี้: <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet">
4. แนะนำ html5shiv.min.js และ response.min.js
สร้างเบราว์เซอร์ที่ไม่สนับสนุนแท็ก HTML5 "สนับสนุน" ไปยังแท็ก HTML5
<!-[ถ้า lt ie 9]> <script src = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/respond.min.js"> </script> <!
5. เพิ่ม jQuery Library เวอร์ชัน 1.x
การคัดลอกรหัสมีดังนี้: <script src = "js/bootstrap/jQuery-1.12.0.min.js"> </script>
6. ทดสอบภายใต้ IE8 ฉันพบปัญหาที่ไม่สนับสนุนตัวยึดตำแหน่ง ต่อไปนี้เป็นวิธีการแก้ปัญหาที่สนับสนุนตัวยึดตำแหน่ง 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"
คุณยังสามารถใช้เวอร์ชัน jQuery อื่น ๆ เพื่อแนะนำ
[รหัส] <script type = "text/javascript" src = "js/bootstrap/jQuery.placeholder.js"> </script>
จากนั้นเพิ่มรหัสลงในไฟล์
<script type = "text/javascript"> $ (function () {$ ('input, textarea'). placeholder ();}); </script>สรุปรหัสมีดังนี้:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "ความกว้าง = ความกว้างของอุปกรณ์ content = "ie = edge, chrome = 1"/> <meta name = "ผู้เขียน" 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-1.12.0.min.js "> </script> <script src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
บันทึก:
1. คำสั่งสำหรับการพิจารณาเวอร์ชัน IE ภายใต้ IE
<!-[ถ้า lte ie 6]> <! [endif]-> ie6 และด้านล่างสามารถมองเห็นได้ <!-[ถ้า lte ie 7]> <! [endif]-> ie7 และต่ำกว่ามองเห็นได้ <!-[ถ้าคือ 6]> <! 7]> <! [endif]->
IE7 และรุ่นที่ใหญ่กว่า IE7 สามารถมองเห็นได้
LTE: ตัวย่อน้อยกว่าหรือเท่ากับซึ่งหมายถึงน้อยกว่าหรือเท่ากับ
LT: เป็นตัวย่อที่น้อยกว่าซึ่งหมายถึงน้อยกว่า
GTE: เป็นตัวย่อที่มากกว่าหรือเท่ากับซึ่งหมายถึงมากกว่าหรือเท่ากับ
GT: เป็นตัวย่อที่ยิ่งใหญ่กว่าซึ่งมีความหมายมากกว่า
- : มันหมายถึงไม่เท่ากันเหมือนกับสัญลักษณ์การตัดสินที่ไม่เท่าเทียมกันใน JavaScript
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน