Source

הצג נכס

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

איך זה עובד

שנה את הערך של displayהנכס עם מחלקות השירות לתצוגה הרספונסיבית שלנו. אנו תומכים בכוונה רק בתת-קבוצה של כל הערכים האפשריים עבור display. ניתן לשלב שיעורים לאפקטים שונים לפי הצורך.

סִמוּן

הצג מחלקות שירות החלות על כל נקודות הפסקה , מ- xsעד xl, אין בהן קיצור של נקודת הפסקה. הסיבה לכך היא שהמחלקות הללו מיושמות מלמעלה min-width: 0;ומעלה, ולפיכך אינן קשורות לשאילתת מדיה. עם זאת, נקודות הפסיקה הנותרות כוללות קיצור של נקודת הפסקה.

לפיכך, שמות המחלקות מקבלים את הפורמט:

.d-{value}לxs
.d-{breakpoint}-{value}עבור sm, md, lgו xl.

כאשר הערך הוא אחד מ:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

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

דוגמאות

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}-noneהמחלקות עבור כל וריאציה של מסך רספונסיבי.

כדי להציג אלמנט רק על מרווח נתון של גדלי מסך ניתן לשלב .d-*-noneמחלקה אחת עם .d-*-*מחלקה, למשל .d-none .d-md-block .d-xl-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-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`

hide on screens wider than lg

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

<div class="d-lg-none">hide on screens wider than lg</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-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>