สนามทดลอง Flex ของ Bootstrap
สร้างเลย์เอาต์ flex ของ Bootstrap 5.3 แบบเห็นภาพ แล้วคัดลอกคลาสยูทิลิตีที่ถูกต้อง — d-flex, justify-content, align-items, order, grow และอื่น ๆ
—
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดข้อมูลใด ๆ
คลาสที่คุณตั้งค่าจะมีผลตั้งแต่เบรกพอยต์นี้ขึ้นไป สลับเบรกพอยต์เพื่อสร้างเลย์เอาต์แบบเรสปอนซีฟ
เกี่ยวกับ สนามทดลอง Flex ของ Bootstrap
Bootstrap Flex Playground ให้คุณสร้างเลย์เอาต์ flexbox ด้วยคลาส utility ของ Bootstrap 5.3 จริง แทนที่จะเป็น CSS ดิบ กำหนดค่าคอนเทนเนอร์ ทิศทาง การตัดบรรทัด justify-content, align-items, gap ด้วยตัวควบคุมแบบแบ่งส่วน คลิกไอเทมใดก็ได้เพื่อกำหนด align-self, order, grow และ shrink ของตัวเอง แล้วดูภาพตัวอย่างสดจัดเรียงใหม่ทันที
ตัวสลับ breakpoint คือสิ่งที่ทำให้มันมากกว่าของเล่น เลือก sm, md, lg, xl หรือ xxl แล้วคลาสที่คุณตั้งค่าจากจุดนั้นจะได้รับ infix แบบ responsive เช่น justify-content-md-between, flex-lg-row ตรงตามที่ระบบ mobile-first ของ Bootstrap ใช้จาก breakpoint นั้นขึ้นไป เพิ่มไอเทมได้สูงสุด 12 ตัวเพื่อจำลองคอมโพเนนต์ที่สมจริง
เมื่อเลย์เอาต์ดูถูกต้องแล้ว คัดลอก HTML ที่สร้างขึ้นหรือแค่คลาสของคอนเทนเนอร์แล้ววางลงในโปรเจกต์ของคุณได้เลย ทุกอย่างทำงานในเบราว์เซอร์ของคุณและไม่มีการอัปโหลดใดๆ
วิธีใช้ สนามทดลอง Flex ของ Bootstrap
- ตั้งค่า utility ของคอนเทนเนอร์ ทิศทาง การตัดบรรทัด justify-content, align-items และ gap ด้วยตัวควบคุมแบบแบ่งส่วน
- เพิ่มหรือลบไอเทม (2 ถึง 12 ตัว) ให้ตรงกับคอมโพเนนต์จริงของคุณ
- คลิกไอเทมเพื่อกำหนด align-self, order หรือ utility ขนาด flex ของตัวเอง
- สลับ breakpoint เพื่อเพิ่มตัวแปร responsive ที่ใช้ตั้งแต่ sm, md, lg, xl หรือ xxl ขึ้นไป
- ตรวจสอบภาพตัวอย่างสด แล้วคัดลอก HTML ที่สร้างขึ้นหรือคลาสของคอนเทนเนอร์