ฉันเรียนรู้ bootstrap เมื่อไม่กี่วันที่ผ่านมาและแยกแยะระบบกริด หากมีข้อผิดพลาดใด ๆ โปรดแก้ไขให้ถูกต้อง
สรุป: ระบบกริดได้พัฒนาหน้าเว็บที่ตอบสนองได้สำหรับพีซีแผ่น PAD และเทอร์มินัลมือถือและมีโซลูชันที่แตกต่างกันตามความละเอียดของหน้าจอที่แตกต่างกัน
(0.1 ขนาดอุปกรณ์หน้าจอมากกว่า 1200px เลือก col-lg
(0.2. ขนาดอุปกรณ์หน้าจออยู่ระหว่าง 970px และ 1200px เลือก col-md
(0.3. ขนาดอุปกรณ์หน้าจออยู่ระหว่าง 768px และ 970px เลือก col-sm
(0.4. ขนาดอุปกรณ์หน้าจอน้อยกว่า 768px เลือก col-xs
1. ระบบกริดแบ่งหน้าออกเป็น 12 คอลัมน์ (สูงสุด 12 คอลัมน์) ดังนี้ :
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, maxinum-scale href = "Library/Bootstrap.min.css"> <style> .a {ความสูง: 50px; เส้นขอบ: 1px สีแดงของแข็ง; ความเป็นมา: สีชมพู; } </style> </head> <body> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> 1 </div> </div> 1 </div> </div> </div> </div> </div> </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> 1 </div> </div> 1 </div> </div> 1 </div> </div> </div> </div> </div> </div> </div> </div> <script src = "library/jq.js"> </script> <script src = "library/bootstrap.min.js"> </script> </body> </html>(2.1, COL-MD-1 เป็นคอลัมน์ที่มีทั้งหมด 12 คอลัมน์ที่ปกคลุมด้วย "แถวแนวนอน" จำนวนต่อท้ายหลังจาก MD คือจำนวนคอลัมน์ที่กำหนด (Col-Lg, Col-SM, Col-Xs เหมือนกัน)
3. ภายใต้อุปกรณ์ที่มีความละเอียดหน้าจอที่แตกต่างกันหน้าที่นำเสนอคือ "หน้าแท่งรูปแบบแรสเตอร์" ที่สอดคล้องกันซึ่งจะตระหนักถึงการตอบสนองที่ตอบสนองดังนี้ :
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, maxinum-scale href = "Library/Bootstrap.min.css"> <style> .a {ความสูง: 50px; เส้นขอบ: 1px สีแดงของแข็ง; ความเป็นมา: สีชมพู; } </style> </head> <body> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> 1 </div> </div> 1 </div> </div> </div> </div> </div> </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> 1 </div> </div> </div> </div> <script src = "Library/jq.js"> </script>(3.1. รหัสด้านบนแสดงให้เห็นว่าเมื่อขนาดอุปกรณ์หน้าจอมากกว่า 1200px แถวแนวนอนหนึ่งแถวมีสี่คอลัมน์หนึ่งคอลัมน์ขนาดใหญ่หนึ่งคอลัมน์มีสามคอลัมน์เล็ก ๆ และคอลัมน์ขนาดเล็กมีทั้งหมด 12 คอลัมน์
(3.2 แสดงว่าเมื่อขนาดอุปกรณ์หน้าจออยู่ระหว่าง 970px และ 1200px (คุณสามารถดูที่เบราว์เซอร์ที่หดตัวลงไปที่ขั้นตอนนี้) มีสามคอลัมน์ในแถวแนวนอนและสี่คอลัมน์ในคอลัมน์ขนาดใหญ่มีทั้งหมด 12 คอลัมน์
(3.2 แสดงว่าเมื่อขนาดอุปกรณ์หน้าจออยู่ระหว่าง 768px และ 970px (คุณสามารถดูที่เบราว์เซอร์ที่หดตัวลงไปที่ขั้นตอนนี้) มีคอลัมน์ขนาดใหญ่สองคอลัมน์ในแถวแนวนอน
(3.2 แสดงว่าเมื่อขนาดอุปกรณ์หน้าจอน้อยกว่า 768px (คุณสามารถดูที่เบราว์เซอร์ที่หดตัวลงไปที่ขั้นตอนนี้) มีคอลัมน์ขนาดใหญ่ในแถวแนวนอนและคอลัมน์ขนาดใหญ่มีคอลัมน์เล็ก ๆ สิบสองคอลัมน์มีทั้งหมด 12 คอลัมน์
4. คอลัมน์ชดเชยการทำรังและการแลกเปลี่ยนในระบบแรสเตอร์
(4.1, คอลัมน์ชดเชย
<div> <div> 8 </div> <div> 3 </div> <!-คอลัมน์ออฟเซ็ตทีละตัวไปทางขวา-> </div>
(4.2, ทำรัง
<div> <!-การทำรัง-> <div style = "padding: 0;"> <div> </div> </div> </div> <div> </div> </div> </div> 3 </div> </div>
(4.3, ตำแหน่งแลกเปลี่ยน
<div> <!-ตำแหน่งสลับ-> <div> 9 </div> <!-กดย้ายไปทางขวา-> <div> 3 </div> <!-ดึงย้ายไปทางซ้าย-> </div>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
บทความนี้ใช้กรณีที่ง่ายที่สุดในการวิเคราะห์จุดเค้าโครงสำคัญที่เกี่ยวข้องในกรณีโดยหวังว่าจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน