ווייַז פאַרמאָג
געשווינד און ריספּאַנסיוולי באַשטימען די אַרויסווייַזן ווערט פון קאַמפּאָונאַנץ און מער מיט אונדזער אַרויסווייַזן יוטילאַטיז. כולל שטיצן פֿאַר עטלעכע פון די מערסט פּראָסט וואַלועס, ווי געזונט ווי עטלעכע עקסטראַז פֿאַר קאַנטראָולינג אַרויסווייַזן ווען דרוקן.
טוישן די ווערט פון די 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
סקרינז.
<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 |
<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
די דרוק און אַרויסווייַזן קלאסן קענען זיין קאַמביינד.
<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>