Bootstrap ให้ระบบกริดสตรีมมิ่งมือถือที่ตอบสนองต่อมือถือ เมื่อขนาดหน้าจอหรือวิวพอร์ตเพิ่มขึ้นระบบจะถูกแบ่งออกเป็นคอลัมน์สูงสุด 12 คอลัมน์โดยอัตโนมัติ
ระบบกริดคล้ายกับตารางที่มีแถวและคอลัมน์ จะต้องวางไว้ในคอนเทนเนอร์ที่มีประเภทตั้งค่าเป็นคอนเทนเนอร์ มันสามารถเป็น div และเนื้อหาถูกวางไว้ในคอลัมน์ กริดในการออกแบบเว็บใช้ในการจัดวางเนื้อหาทำให้เว็บไซต์ง่ายต่อการเรียกดู ต่อไปนี้เป็นตัวอย่างของการใช้เค้าโครง bootstrap grid
<div> <div> col2 </div> <div> col10 </div> </div>
เอฟเฟกต์การแสดงผลมีดังนี้:
รูปแบบของ class = "แถว" ถูกเพิ่มเพื่อแสดงแถวและรูปแบบของ class = "col-sm-2" จะถูกเพิ่มเพื่อแสดงคอลัมน์ ระบบแบ่งหน้าจอทั้งหมดออกเป็น 12 ส่วน COL-SM-2 หมายความว่าคอลัมน์ครอบคลุม 2 ส่วนและอัตราส่วน COL-SM-10 หมายความว่าคอลัมน์ครอบคลุม 10 ส่วน เอฟเฟกต์ที่แสดงจะดังแสดงในรูปด้านบนระบุว่ามีสองคอลัมน์ในแถวเดียวบัญชีคอลัมน์แรกสำหรับ 2 ส่วนและบัญชีคอลัมน์ที่สองเป็นเวลา 10 ส่วน
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าแบบตอบสนองซึ่งสะท้อนให้เห็นในระบบกริดซึ่งเป็นอุปกรณ์ที่สอดคล้องกับขนาดการแสดงผลที่แตกต่างกันและสามารถนำเสนอเอฟเฟกต์การแสดงผลที่แตกต่างกัน ดังที่แสดงด้านล่าง:
<div> <div> .COL-XS-12 .COL-MD-8 </div> <div> .COL-XS-6 .COL-MD-E4 </div> </div>
COL-MD-8 หมายความว่ารายการนี้มี 8 ส่วนภายใต้หน้าจอขนาดกลางเช่นเดสก์ท็อปธรรมดาและแล็ปท็อป COL-XS-12 หมายความว่าคอลัมน์นี้บัญชีสำหรับ 12 สำเนาภายใต้หน้าจอขนาดเล็กเช่นแท็บเล็ต รหัสด้านบนแสดงให้เห็นว่ามีสองคอลัมน์ในแถวและแถวถัดไปของเดสก์ท็อปสามัญและแล็ปท็อป คอลัมน์แรกบัญชีสำหรับ 8 ส่วนคอลัมน์ที่สองบัญชีสำหรับ 4 ส่วนและแถวถัดไปและบัญชีคอลัมน์ถัดไปสำหรับ 2 คอลัมน์คอลัมน์บัญชีแรกสำหรับ 12 ส่วนและบัญชีคอลัมน์ที่สองสำหรับ 6 ส่วน ด้วยวิธีนี้เอฟเฟกต์ต่าง ๆ จะเกิดขึ้นได้กับอุปกรณ์แสดงผลที่แตกต่างกัน คุณสามารถจำลองสถานการณ์ทั้งสองนี้ได้โดยการปรับขนาดเบราว์เซอร์
รูปต่อไปนี้แสดงให้เห็นว่าระบบกริดของ Bootstrap ทำงานอย่างไรบนอุปกรณ์หลายหน้าจอ
ด้านบนเป็นคำอธิบายที่สมบูรณ์ของพื้นฐาน Bootstrap Grid ที่สามที่แนะนำโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!