ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

แสดงคุณสมบัติ

สลับค่าการแสดงผลของส่วนประกอบและอื่นๆ ได้อย่างรวดเร็วและตอบสนองด้วยยูทิลิตี้การแสดงผลของเรา รวมถึงการรองรับค่าทั่วไปบางค่า เช่นเดียวกับคุณสมบัติพิเศษบางอย่างสำหรับการควบคุมการแสดงผลเมื่อพิมพ์

ในหน้านี้

มันทำงานอย่างไร

เปลี่ยนค่าของ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หน้าจอ

ตัวอย่าง

d-inline
d-inline 
<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>
d-block d-block 
<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
hide on lg and wider screens
ซ่อนบนหน้าจอที่เล็กกว่า lg 
<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

สามารถรวมคลาสการพิมพ์และการแสดงผลเข้าด้วยกันได้

เฉพาะหน้าจอ (ซ่อนเมื่อพิมพ์เท่านั้น)
Print Only (Hide on screen only)
ซ่อนได้ขนาดใหญ่บนหน้าจอ แต่แสดงเมื่อพิมพ์เสมอ 
<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
    ),