แสดงคุณสมบัติ
สลับค่าการแสดงผลของส่วนประกอบและอื่นๆ ได้อย่างรวดเร็วและตอบสนองด้วยยูทิลิตี้การแสดงผลของเรา รวมถึงการรองรับค่าทั่วไปบางค่า เช่นเดียวกับคุณสมบัติพิเศษบางอย่างสำหรับการควบคุมการแสดงผลเมื่อพิมพ์
มันทำงานอย่างไร
เปลี่ยนค่าของdisplay
คุณสมบัติด้วยคลาสยูทิลิตี้การแสดงผลที่ตอบสนองของเรา เราตั้งใจสนับสนุนเฉพาะชุดย่อยของค่าที่เป็นไปได้ทั้งหมดdisplay
สำหรับ สามารถรวมคลาสเพื่อเอฟเฟกต์ต่าง ๆ ได้ตามที่คุณต้องการ
สัญกรณ์
แสดงคลาสยูทิลิตี้ที่ใช้กับเบรกพอยต์ ทั้งหมด จากxs
ถึง ถึงxxl
ไม่มีตัวย่อเบรกพอยต์ในตัว นี่เป็นเพราะว่าคลาสเหล่านั้นถูกนำไปใช้ตั้งแต่min-width: 0;
ขึ้นไป ดังนั้นจึงไม่ถูกผูกไว้โดยเคียวรีสื่อ อย่างไรก็ตาม จุดพักที่เหลือจะรวมตัวย่อของเบรกพอยต์ด้วย
ดังนั้น คลาสจะถูกตั้งชื่อโดยใช้รูปแบบ:
.d-{value}
สำหรับxs
.d-{breakpoint}-{value}
สำหรับsm
,md
,lg
,xl
, และxxl
.
โดยที่ค่าเป็นหนึ่งใน:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
ค่าที่แสดงสามารถเปลี่ยนแปลงได้โดยการเปลี่ยน$displays
ตัวแปรและคอมไพล์ SCSS ใหม่
คิวรี่สื่อมีผลต่อความกว้างของหน้าจอด้วยเบรกพอยต์ที่กำหนดหรือใหญ่กว่า ตัวอย่างเช่น.d-lg-none
ตั้งค่าdisplay: none;
บนlg
, xl
, และxxl
หน้าจอ
ตัวอย่าง
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
ซ่อนองค์ประกอบ
เพื่อการพัฒนาที่เป็นมิตรกับอุปกรณ์พกพาที่เร็วขึ้น ให้ใช้คลาสการแสดงผลที่ตอบสนองเพื่อแสดงและซ่อนองค์ประกอบตามอุปกรณ์ หลีกเลี่ยงการสร้างไซต์เดียวกันในเวอร์ชันที่ต่างกันโดยสิ้นเชิง ให้ซ่อนองค์ประกอบที่ตอบสนองต่อหน้าจอแต่ละขนาดแทน
หากต้องการซ่อนองค์ประกอบ ให้ใช้.d-none
คลาสหรือคลาสใดคลาสหนึ่ง.d-{sm,md,lg,xl,xxl}-none
สำหรับรูปแบบหน้าจอที่ตอบสนอง
หากต้องการแสดงองค์ประกอบเฉพาะในช่วงเวลาที่กำหนดของขนาดหน้าจอ คุณสามารถรวม.d-*-none
คลาสหนึ่งกับ.d-*-*
คลาสได้ ตัวอย่างเช่น.d-none .d-md-block .d-xl-none .d-xxl-none
จะซ่อนองค์ประกอบสำหรับขนาดหน้าจอทั้งหมด ยกเว้นในอุปกรณ์ขนาดกลางและขนาดใหญ่
ขนาดหน้าจอ | ระดับ |
---|---|
ซ่อนอยู่ทั้งหมด | .d-none |
ซ่อนไว้บน xs . เท่านั้น | .d-none .d-sm-block |
ซ่อนอยู่ใน sm . เท่านั้น | .d-sm-none .d-md-block |
ซ่อนอยู่ใน md . เท่านั้น | .d-md-none .d-lg-block |
ซ่อนไว้บน lg . เท่านั้น | .d-lg-none .d-xl-block |
ซ่อนอยู่บน xl . เท่านั้น | .d-xl-none .d-xxl-block |
ซ่อนอยู่ใน xxl . เท่านั้น | .d-xxl-none |
มองเห็นได้ทั้งหมด | .d-block |
ปรากฏบน xs . เท่านั้น | .d-block .d-sm-none |
มองเห็นได้เฉพาะใน sm | .d-none .d-sm-block .d-md-none |
มองเห็นได้เฉพาะใน md | .d-none .d-md-block .d-lg-none |
มองเห็นได้บน lg . เท่านั้น | .d-none .d-lg-block .d-xl-none |
มองเห็นได้เฉพาะใน xl | .d-none .d-xl-block .d-xxl-none |
มองเห็นได้เฉพาะบน xxl | .d-none .d-xxl-block |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
แสดงในงานพิมพ์
เปลี่ยนdisplay
ค่าขององค์ประกอบเมื่อพิมพ์ด้วยคลาสยูทิลิตี้การแสดงผลงานพิมพ์ของเรา รวมการสนับสนุนค่าเดียวกัน กับ ยูทิลิตี้display
ตอบสนองของเรา.d-*
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
สามารถรวมคลาสการพิมพ์และการแสดงผลเข้าด้วยกันได้
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
ซาส
ยูทิลิตี้ API
ยูทิลิตี้การแสดงผลได้รับการประกาศในยูทิลิตี้ API ของเราในscss/_utilities.scss
. เรียนรู้วิธีใช้ยูทิลิตี้ API
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),