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

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

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

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

.col-md-4
.col-md-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-6
.col-md-4

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

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

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

การล้างคอลัมน์

ล้างทุ่นลอยที่จุดพักเฉพาะเพื่อป้องกันการห่อที่ไม่สะดวกด้วยเนื้อหาที่ไม่สม่ำเสมอ

.col-xs-6 .col-sm-3
ปรับขนาดวิวพอร์ตของคุณหรือดูตัวอย่างในโทรศัพท์ของคุณ
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

รีเซ็ตออฟเซ็ต ดัน และดึง

รีเซ็ตออฟเซ็ต ดัน และดึงที่จุดสั่งหยุดเฉพาะ

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0