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

קאַנטיינערז

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

ווי זיי אַרבעטן

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

Bootstrap קומט מיט דריי פאַרשידענע קאַנטיינערז:

  • .container, וואָס שטעלט אַ max-widthביי יעדער אָפּרופיק ברייקפּוינט
  • .container-{breakpoint}, וואָס איז width: 100%ביז די ספּעסאַפייד ברייקפּוינט
  • .container-fluid, וואָס איז 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
);

אין אַדישאַן צו קאַסטאַמייז די Sass, איר קענען אויך מאַכן דיין אייגענע קאַנטיינערז מיט אונדזער Sass מיקסין.

// 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();
}

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