האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

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

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

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

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

די אַרויסווייַזן וואַלועס קענען זיין אָלטערד דורך טשאַנגינג די displayוואַלועס דיפיינד אין $utilitiesאון ריקאָמפּיילינג די SCSS.

די מידיאַ קוויריז ווירקן פאַרשטעלן ווידטס מיט די געגעבן ברייקפּוינט אָדער גרעסערע . פֿאַר בייַשפּיל, .d-lg-noneשטעלט display: none;אויף lg, xl, און xxlסקרינז.

ביישפילן

d-inline
d-inline
HTML
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
ד-בלאָק ד-בלאָק
HTML
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
פאַרבאָרגן בלויז אויף xxl .d-xxl-none .d-xxl-block
קענטיק אויף אַלע .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
באַהאַלטן אויף LG און ברייט סקרינז
באַהאַלטן אויף סקרינז קלענערער ווי לג
HTML
<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

די דרוק און אַרויסווייַזן קלאסן קענען זיין קאַמביינד.

בלויז פאַרשטעלן (באַהאַלטן בלויז אויף דרוק)
פּרינט בלויז (באַהאַלטן בלויז אויף פאַרשטעלן)
באַהאַלטן אַרויף צו גרויס אויף פאַרשטעלן, אָבער שטענדיק ווייַזן אויף דרוק
HTML
<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
    ),