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>

ד-בלאָק ד-בלאָק

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

hide on screens wider than 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>