สนามทดลองกริด Bootstrap
สร้างเลย์เอาต์กริดแบบ responsive ด้วย Bootstrap 5.3 ในเชิงภาพ แล้วคัดลอกคลาสที่ถูกต้อง — row, col, ระยะเยื้อง, ลำดับ, ช่องไฟ และการจัดวาง
—
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดข้อมูลใด ๆ
คลาสที่คุณตั้งค่าจะมีผลตั้งแต่จุดเปลี่ยนนี้ขึ้นไป สลับจุดเปลี่ยนเพื่อสร้างเลย์เอาต์แบบ responsive
เกี่ยวกับ สนามทดลองกริด Bootstrap
Bootstrap Grid Playground สร้างเลย์เอาต์แถวและคอลัมน์แบบ responsive ด้วยระบบกริดของ Bootstrap 5.3 จริง เพิ่มคอลัมน์ได้สูงสุด 12 คอลัมน์ในหนึ่งแถว คลิกคอลัมน์ใดก็ได้เพื่อกำหนดความกว้าง offset และ order ของมัน แล้วปรับ gutter และการจัดแนวบนแถว ภาพตัวอย่างและมาร์กอัปที่สร้างขึ้นจะอัปเดตทันทีทุกครั้งที่เปลี่ยนแปลง
เนื่องจากกริดของ Bootstrap เป็นแบบ mobile-first ตัวสลับ breakpoint จึงเป็นหัวใจสำคัญ ตั้งค่าคอลัมน์เป็น col-6 ที่ระดับฐานและ col-md-4 ที่ md แล้วคุณจะได้รูปแบบคลาสสิกที่ซ้อนกันบนมือถือและเรียงสามคอลัมน์บนเดสก์ท็อป โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว offset, order และคลาส gutter ทั้งหมดรับ infix แบบ responsive เดียวกัน
ผลลัพธ์คือ HTML ที่สะอาดพร้อมคัดลอกวาง เป็น div ของแถวพร้อมคอลัมน์ลูกและคลาสที่คุณตั้งค่าไว้อย่างแม่นยำ คัดลอกทั้งสนิปเพ็ตหรือแค่คลาสของแถว ทุกอย่างทำงานในเครื่องภายในเบราว์เซอร์ของคุณ
วิธีใช้ สนามทดลองกริด Bootstrap
- เพิ่มคอลัมน์ลงในแถว สูงสุด 12 คอลัมน์ แล้วคลิกเลือกคอลัมน์หนึ่ง
- ตั้งค่าช่วงคอลัมน์ที่เลือก offset และ order สำหรับ breakpoint ปัจจุบัน
- สลับ breakpoint (sm ถึง xxl) เพื่อกำหนดว่าเลย์เอาต์จะจัดเรียงใหม่อย่างไรบนหน้าจอที่ใหญ่ขึ้น
- ปรับ gutter ของแถวและ utility การจัดแนวของมัน
- ตรวจสอบภาพตัวอย่างสด แล้วคัดลอก HTML ที่สร้างขึ้นหรือคลาสของแถว