קאַנטיינערז

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

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

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

• .container, וואָס שטעלט אַ max-widthביי יעדער אָפּרופיק ברייקפּוינט
• .container-fluid, וואָס איז width: 100%אין אַלע ברייקפּוינט
• .container-{breakpoint}, וואָס איז width: 100%ביז די ספּעסאַפייד ברייקפּוינט

די טיש אונטן ילאַסטרייץ ווי יעדער קאַנטיינער ס max-widthקאַמפּערז צו דער אָריגינעל .containerאון .container-fluidאַריבער יעדער ברייקפּוינט.

זען זיי אין קאַמף און פאַרגלייַכן זיי אין אונדזער גריד בייַשפּיל .

פעליקייַט קאַנטיינער

אונדזער פעליקייַט .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();
}

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