เลย์เอาต์กริดพื้นฐานเพื่อให้คุณคุ้นเคยกับสิ่งปลูกสร้างภายในระบบกริด Bootstrap
ในตัวอย่างเหล่านี้.themed-grid-colคลาสจะถูกเพิ่มลงในคอลัมน์เพื่อเพิ่มธีมบางส่วน นี่ไม่ใช่คลาสที่มีอยู่ใน Bootstrap โดยค่าเริ่มต้น
ระบบกริด Bootstrap มีห้าระดับ หนึ่งระดับสำหรับอุปกรณ์แต่ละช่วงที่เรารองรับ แต่ละระดับเริ่มต้นที่ขนาดวิวพอร์ตขั้นต่ำและนำไปใช้กับอุปกรณ์ที่มีขนาดใหญ่กว่าโดยอัตโนมัติ เว้นแต่จะมีการแทนที่
รับคอลัมน์ที่ มีความกว้างเท่ากันสามคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ บนอุปกรณ์เคลื่อนที่ แท็บเล็ต และด้านล่าง คอลัมน์จะเรียงซ้อนกันโดยอัตโนมัติ
รับ สามคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ที่มีความกว้างต่างกัน โปรดจำไว้ว่า คอลัมน์กริดควรรวมกันได้มากถึงสิบสองบล็อกสำหรับบล็อกแนวนอนเดียว ยิ่งไปกว่านั้น คอลัมน์ต่างๆ ก็เริ่มซ้อนกันไม่ว่าวิวพอร์ตจะเป็นอย่างไรก็ตาม
รับ สองคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่
ไม่จำเป็นต้องมีคลาสกริดสำหรับองค์ประกอบแบบเต็มความกว้าง
ตามเอกสารประกอบ การซ้อนทำได้ง่าย—เพียงแค่ใส่แถวของคอลัมน์ภายในคอลัมน์ที่มีอยู่ ซึ่งจะให้สองคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่โดยมีอีกสองคอลัมน์ (ความกว้างเท่ากัน) ภายในคอลัมน์ที่ใหญ่กว่า
ที่ขนาดอุปกรณ์เคลื่อนที่ แท็บเล็ตและด้านล่าง คอลัมน์เหล่านี้และคอลัมน์ที่ซ้อนกันจะเรียงซ้อนกัน
ระบบกริด Bootstrap v4 มีคลาสห้าระดับ: xs (เล็กพิเศษ), sm (เล็ก), md (กลาง), lg (ใหญ่) และ xl (ใหญ่พิเศษ) คุณสามารถใช้ชุดค่าผสมของคลาสเหล่านี้ได้เกือบทุกแบบเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
แต่ละชั้นของคลาสจะขยายใหญ่ขึ้น ซึ่งหมายความว่าหากคุณวางแผนที่จะตั้งค่าความกว้างเท่ากันสำหรับ xs และ sm คุณจะต้องระบุ xs เท่านั้น