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

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

ในตัวอย่างเหล่านี้.themed-grid-colคลาสจะถูกเพิ่มลงในคอลัมน์เพื่อเพิ่มธีมบางส่วน นี่ไม่ใช่คลาสที่มีอยู่ใน Bootstrap โดยค่าเริ่มต้น

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

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

ด้วยการใช้.row-cols-*คลาส คุณสามารถสร้างตารางที่มีคอลัมน์เท่ากันได้อย่างง่ายดาย

.colลูกของ .row-cols-md-3

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

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

.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 (เล็กพิเศษ ไม่ได้ใช้คลาส infix), sm (เล็ก), md (กลาง), lg (ใหญ่) และ xl (ใหญ่พิเศษ) คุณสามารถใช้ชุดค่าผสมของคลาสเหล่านี้ได้เกือบทุกแบบเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น

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

.col-md-8

.col-6 .col-md-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4

รางน้ำ

ด้วย.gx-*คลาส รางน้ำแนวนอนสามารถปรับได้

.colมี .gx-4รางน้ำ

ใช้.gy-*คลาสเพื่อควบคุมรางน้ำแนวตั้ง

.colมี .gy-4รางน้ำ

ด้วย.g-*คลาส รางน้ำทั้งสองทิศทางสามารถปรับได้

.colมี .g-3รางน้ำ

ตู้คอนเทนเนอร์

คลาสเพิ่มเติมที่เพิ่มใน Bootstrap v4.4 อนุญาตให้คอนเทนเนอร์ที่มีความกว้าง 100% จนถึงเบรกพอยต์เฉพาะ v5 เพิ่มxxlเบรกพอยต์ ใหม่

.คอนเทนเนอร์

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-ของเหลว