ยูทิลิตี้สำหรับเลย์เอาต์
เพื่อการพัฒนาที่เป็นมิตรกับอุปกรณ์พกพาและตอบสนองได้รวดเร็ว Bootstrap มีคลาสยูทิลิตี้มากมายสำหรับการแสดง การซ่อน การจัดตำแหน่ง และการเว้นระยะห่างของเนื้อหา
ใช้ยูทิลิตีการแสดงผลของเราเพื่อสลับค่าทั่วไปของdisplayพร็อพเพอร์ตี้แบบ ตอบสนอง ผสมผสานกับระบบกริด เนื้อหา หรือส่วนประกอบของเราเพื่อแสดงหรือซ่อนไว้ในวิวพอร์ตเฉพาะ
Bootstrap 4 สร้างขึ้นด้วย flexbox แต่ไม่ใช่ทุกองค์ประกอบที่displayได้รับการเปลี่ยนแปลงdisplay: flexเนื่องจากจะเป็นการเพิ่มการแทนที่ที่ไม่จำเป็นจำนวนมาก และเปลี่ยนลักษณะการทำงานของเบราว์เซอร์ที่สำคัญโดยไม่คาดคิด ส่วนประกอบส่วนใหญ่ของ เรา สร้างขึ้นโดยเปิดใช้งาน flexbox
หากคุณต้องการเพิ่มdisplay: flexองค์ประกอบ ให้ทำด้วย.d-flexหรือหนึ่งในตัวแปรที่ตอบสนอง (เช่น.d-sm-flex) คุณจะต้องใช้คลาสหรือdisplayค่านี้เพื่ออนุญาตให้ใช้ยูทิลิตี flexbox พิเศษของเรา สำหรับการปรับขนาด การจัดตำแหน่ง การเว้นวรรค และอื่นๆ
ใช้ยูทิลิตีmarginและ ระยะห่าง เพื่อควบคุมวิธีการเว้นระยะห่างและขนาดองค์ประกอบและส่วนประกอบ Bootstrap 4 มีมาตราส่วนห้าระดับสำหรับยูทิลิตี้การเว้นวรรค โดยยึดตามตัวแปรเริ่มต้น ของค่า เลือกค่าสำหรับวิวพอร์ตทั้งหมด (เช่นสำหรับ) หรือเลือกตัวแปรที่ตอบสนองเพื่อกำหนดเป้าหมายวิวพอร์ตเฉพาะ (เช่นสำหรับการเริ่มต้นที่เบรกพอยต์)padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd
เมื่อdisplayไม่จำเป็นต้องสลับไปมา คุณสามารถสลับvisibilityองค์ประกอบด้วยยูทิลิตี้การมองเห็นของ เรา องค์ประกอบที่มองไม่เห็นจะยังคงส่งผลต่อเค้าโครงของหน้า แต่จะถูกซ่อนจากผู้เยี่ยมชม