ווייַז פאַרמאָג

געשווינד און ריספּאַנסיוולי באַשטימען די אַרויסווייַזן ווערט פון קאַמפּאָונאַנץ און מער מיט אונדזער אַרויסווייַזן יוטילאַטיז. כולל שטיצן פֿאַר עטלעכע פון די מערסט פּראָסט וואַלועס, ווי געזונט ווי עטלעכע עקסטראַז פֿאַר קאַנטראָולינג אַרויסווייַזן ווען דרוקן.

אויף דעם בלאַט

וויאזוי עס ארבעט

טוישן די ווערט פון די 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

<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`
פאַרבאָרגן בלויז אויף סמ	`.d-sm-none .d-md-block`
פאַרבאָרגן בלויז אויף מד	`.d-md-none .d-lg-block`
פאַרבאָרגן בלויז אויף לג	`.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`
קענטיק בלויז אויף סמ	`.d-none .d-sm-block .d-md-none`
קענטיק בלויז אויף md	`.d-none .d-md-block .d-lg-none`
קענטיק בלויז אויף לג	`.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

באַהאַלטן אויף סקרינז קלענערער ווי לג

<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>

סאַס

Utilities API

ווייַז יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities 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
    ),