הצג נכס
החלף במהירות ובתגובה את ערך התצוגה של רכיבים ועוד עם כלי העזר לתצוגה שלנו. כולל תמיכה בכמה מהערכים הנפוצים יותר, כמו גם כמה תוספות לשליטה בתצוגה בעת הדפסה.
איך זה עובד
שנה את הערך של 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 של 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
),