ตัวอย่างตาราง Bootstrap

เลย์เอาต์กริดพื้นฐานเพื่อให้คุณคุ้นเคยกับสิ่งปลูกสร้างภายในระบบกริด Bootstrap

ห้าตารางชั้น

ระบบกริด Bootstrap มีห้าระดับ หนึ่งระดับสำหรับอุปกรณ์แต่ละช่วงที่เรารองรับ แต่ละระดับเริ่มต้นที่ขนาดวิวพอร์ตขั้นต่ำและนำไปใช้กับอุปกรณ์ที่มีขนาดใหญ่กว่าโดยอัตโนมัติ เว้นแต่จะมีการแทนที่

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

สามคอลัมน์เท่ากัน

รับคอลัมน์ที่ มีความกว้างเท่ากันสามคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ บนอุปกรณ์เคลื่อนที่ แท็บเล็ต และด้านล่าง คอลัมน์จะเรียงซ้อนกันโดยอัตโนมัติ

.col-md-4

สามคอลัมน์ไม่เท่ากัน

รับ สามคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ที่มีความกว้างต่างกัน โปรดจำไว้ว่า คอลัมน์กริดควรรวมกันได้มากถึงสิบสองบล็อกสำหรับบล็อกแนวนอนเดียว ยิ่งไปกว่านั้น คอลัมน์ต่างๆ ก็เริ่มซ้อนกันไม่ว่าวิวพอร์ตจะเป็นอย่างไรก็ตาม

.col-md-3

.col-md-6

.col-md-3

สองคอลัมน์

รับ สองคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่

.col-md-8

.col-md-4

ความกว้างเต็ม คอลัมน์เดียว

ไม่จำเป็นต้องมีคลาสกริดสำหรับองค์ประกอบแบบเต็มความกว้าง

สองคอลัมน์ที่มีสองคอลัมน์ที่ซ้อนกัน

ตามเอกสารประกอบ การซ้อนทำได้ง่าย—เพียงแค่ใส่แถวของคอลัมน์ภายในคอลัมน์ที่มีอยู่ ซึ่งจะให้สองคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่โดยมีอีกสองคอลัมน์ (ความกว้างเท่ากัน) ภายในคอลัมน์ที่ใหญ่กว่า

ที่ขนาดอุปกรณ์เคลื่อนที่ แท็บเล็ตและด้านล่าง คอลัมน์เหล่านี้และคอลัมน์ที่ซ้อนกันจะเรียงซ้อนกัน

.col-md-8

.col-md-6

.col-md-4

ผสม: มือถือและเดสก์ท็อป

ระบบกริด Bootstrap v4 มีคลาสห้าระดับ: xs (เล็กพิเศษ), sm (เล็ก), md (กลาง), lg (ใหญ่) และ xl (ใหญ่พิเศษ) คุณสามารถใช้ชุดค่าผสมของคลาสเหล่านี้ได้เกือบทุกแบบเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น

แต่ละชั้นของคลาสจะขยายใหญ่ขึ้น ซึ่งหมายความว่าหากคุณวางแผนที่จะตั้งค่าความกว้างเท่ากันสำหรับ xs และ sm คุณจะต้องระบุ xs เท่านั้น

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

ผสม: มือถือ แท็บเล็ต และเดสก์ท็อป

.col-12 .col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4