ברייקפּוינץ

האַרץ קאַנסעפּס

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

• ניצן מעדיע קוויריז צו אַרכיטעקט דיין CSS דורך ברייקפּוינט. מעדיע קוויריז זענען אַ שטריך פון CSS וואָס אַלאַוז איר צו קאַנדישאַנאַלי צולייגן סטיילז באזירט אויף אַ גאַנג פון בלעטערער און אָפּערייטינג סיסטעם פּאַראַמעטערס. מיר רובֿ קאַמאַנלי נוצן min-widthאין אונדזער מידיאַ קוויריז.

• מאָביל ערשטער, אָפּרופיק פּלאַן איז דער ציל. Bootstrap's CSS יימז צו צולייגן די נאַקעט מינימום פון סטיילז צו מאַכן אַ אויסלייג אַרבעט אין דער קלענסטער ברייקפּוינט, און דערנאָך לייַערס אויף סטיילז צו סטרויערן דעם פּלאַן פֿאַר גרעסערע דעוויסעס. דאָס אָפּטימיזעס דיין CSS, ימפּרוווז רענדערינג צייט און גיט אַ גרויס דערפאַרונג פֿאַר דיין וויזאַטערז.

בנימצא ברייקפּאָינץ

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

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

די ברעאַקפּאָינץ זענען קוסטאָמיזאַבלע דורך סאַס - איר וועט געפֿינען זיי אין אַ סאַס מאַפּע אין אונדזער _variables.scssסטילעשעעט.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

מידיאַ קוויריז

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

מין-ברייט

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

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

די סאַס מיקסינס איבערזעצן אין אונדזער קאַמפּיילד CSS ניצן די וואַלועס דערקלערט אין אונדזער סאַסס וועריאַבאַלז. למשל:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

מאַקס-ברייט

מיר טייל מאָל נוצן מידיאַ קוויריז וואָס גיין אין די אנדערע ריכטונג (די געגעבן פאַרשטעלן גרייס אָדער קלענערער ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

די מיקסינס נעמען די דערקלערט ברייקפּאָינץ, אַראָפּרעכענען .02pxפון זיי און נוצן זיי ווי אונדזער max-widthוואַלועס. למשל:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

איין ברייקפּאָינט

עס זענען אויך מעדיע פֿראגן און מיקסינס פֿאַר טאַרגאַטינג אַ איין אָפּשניט פון פאַרשטעלן סיזעס מיט די מינימום און מאַקסימום ברייקפּוינט ברייט.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

פֿאַר בייַשפּיל, דער @include media-breakpoint-only(md) { ... }רעזולטאַט וועט זיין:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

צווישן ברייקפּוינץ

סימילאַרלי, מעדיע פֿראגן קען שפּאַן קייפל ברייקפּוינט ברייט:

@include media-breakpoint-between(md, xl) { ... }

וואָס רעזולטאַט אין:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }