הצג נכס

החלף במהירות ובתגובה את ערך התצוגה של רכיבים ועוד עם כלי העזר לתצוגה שלנו. כולל תמיכה בכמה מהערכים הנפוצים יותר, כמו גם כמה תוספות לשליטה בתצוגה בעת הדפסה.

בעמוד זה

איך זה עובד

שנה את הערך של 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

ניתן לשנות את ערכי התצוגה על ידי שינוי displayהערכים המוגדרים ב- $utilitiesSCSS והידור מחדש.

שאילתות המדיה משפיעות על רוחב המסך עם נקודת הפריצה הנתונה או יותר . לדוגמה, .d-lg-noneמגדיר display: none;על lg, xl, xxlומסכים.

דוגמאות

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
מוסתר רק ב-xxl	`.d-xxl-none .d-xxl-block`
גלוי על כולם	`.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`

להסתיר במסכי LG ומסכים רחבים יותר

להסתיר במסכים קטנים מ-lg

html

<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

ניתן לשלב את שיעורי הדפוס והתצוגה.

מסך בלבד (הסתר בהדפסה בלבד)

הדפסה בלבד (הסתר על המסך בלבד)

הסתר עד גדול על המסך, אבל תמיד הצג בהדפסה

html

<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 של Utilities

כלי עזר לתצוגה מוצהרים ב-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
    ),