קאַנטיינערז
קאַנטיינערז זענען אַ פונדאַמענטאַל בנין בלאָק פון Bootstrap וואָס אַנטהאַלטן, בלאָק און ייַנרייען דיין אינהאַלט אין אַ געגעבן מיטל אָדער וויופּאָרט.
ווי זיי אַרבעטן
קאַנטיינערז זענען די מערסט יקערדיק אויסלייג עלעמענט אין Bootstrap און זענען פארלאנגט ווען איר נוצן אונדזער פעליקייַט גריד סיסטעם . קאַנטיינערז זענען געניצט צו אַנטהאַלטן, בלאָק און (מאל) צענטער די אינהאַלט אין זיי. כאָטש קאַנטיינערז קענען זיין נעסטעד, רובֿ לייאַוץ טאָן ניט דאַרפן אַ נעסטעד קאַנטיינער.
Bootstrap קומט מיט דריי פאַרשידענע קאַנטיינערז:
.container, וואָס שטעלט אַmax-widthביי יעדער אָפּרופיק ברייקפּוינט.container-fluid, וואָס איזwidth: 100%אין אַלע ברייקפּוינט.container-{breakpoint}, וואָס איזwidth: 100%ביז די ספּעסאַפייד ברייקפּוינט
די טיש אונטן ילאַסטרייץ ווי יעדער קאַנטיינער ס max-widthקאַמפּערז צו דער אָריגינעל .containerאון .container-fluidאַריבער יעדער ברייקפּוינט.
זען זיי אין קאַמף און פאַרגלייַכן זיי אין אונדזער גריד בייַשפּיל .
| עקסטרע קליין <576 פּקס |
קליין ≥576 פּקס |
מיטל ≥768 פּקס |
גרויס ≥ 992 פּקס |
X-Large ≥1200פּקס |
קסקס-גרויס ≥1400 פּקס |
|
|---|---|---|---|---|---|---|
.container |
100% | 540 פּקס | 720 פּקס | 960 פּקס | 1140 פּקס | 1320 פּקס |
.container-sm |
100% | 540 פּקס | 720 פּקס | 960 פּקס | 1140 פּקס | 1320 פּקס |
.container-md |
100% | 100% | 720 פּקס | 960 פּקס | 1140 פּקס | 1320 פּקס |
.container-lg |
100% | 100% | 100% | 960 פּקס | 1140 פּקס | 1320 פּקס |
.container-xl |
100% | 100% | 100% | 100% | 1140 פּקס | 1320 פּקס |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 פּקס |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
פעליקייַט קאַנטיינער
אונדזער פעליקייַט .containerקלאַס איז אַ אָפּרופיק, פאַרפעסטיקט-ברייט קאַנטיינער, טייַטש די max-widthענדערונגען אין יעדער ברייקפּוינט.
<div class="container">
<!-- Content here -->
</div>
אָפּרופיק קאַנטיינערז
אָפּרופיק קאַנטיינערז לאָזן איר צו ספּעציפיצירן אַ קלאַס וואָס איז 100% ברייט ביז די ספּעסיפיעד ברייקפּאָינט איז ריטשט, נאָך וואָס מיר צולייגן max-widths פֿאַר יעדער פון די העכער ברייקפּאָינץ. פֿאַר בייַשפּיל, .container-smאיז 100% ברייט צו אָנהייבן ביז די smברייקפּוינט איז ריטשט, ווו עס וועט וואָג אַרויף מיט md, lg, xl, און xxl.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
פליסיק קאַנטיינערז
ניצן .container-fluidפֿאַר אַ פול-ברייט קאַנטיינער, ספּאַנינג די גאנצע ברייט פון די וויופּאָרט.
<div class="container-fluid">
...
</div>
סאַס
ווי געוויזן אויבן, Bootstrap דזשענערייץ אַ סעריע פון פּרעדעפינעד קאַנטיינער קלאסן צו העלפֿן איר בויען די לייאַוץ איר ווילט. איר קענט קאַסטאַמייז די פּרעדעפינעד קאַנטיינער קלאסן דורך מאָדיפיצירן די Sass מאַפּע (געפונען אין _variables.scss) וואָס מאַכט זיי:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
אין אַדישאַן צו קאַסטאַמייז די סאַס, איר קענען אויך מאַכן דיין אייגענע קאַנטיינערז מיט אונדזער סאַס מיקסין.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
פֿאַר מער אינפֿאָרמאַציע און ביישפילן אויף ווי צו מאָדיפיצירן אונדזער סאַס מאַפּס און וועריאַבאַלז, ביטע אָפּשיקן צו די סאַסס אָפּטיילונג פון די גריד דאַקיומענטיישאַן .