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