מיכלים

קונטיינרים הם אבן בניין בסיסית של Bootstrap המכילים, מרפדים ומיישרים את התוכן שלך בתוך מכשיר או נקודת מבט נתונה.

בעמוד זה

איך הם עובדים

קונטיינרים הם אלמנט הפריסה הבסיסי ביותר ב-Bootstrap והם נדרשים בעת שימוש במערכת ברירת המחדל שלנו . מיכלים משמשים להכיל, לרפד ו(לפעמים) למרכז את התוכן בתוכם. אמנם ניתן לקנן מיכלים, אך רוב הפריסות אינן דורשות מיכל מקונן.

Bootstrap מגיע עם שלושה מיכלים שונים:

.container, שקובע a max-widthבכל נקודת שבירה מגיבה
.container-{breakpoint}, שזה width: 100%עד לנקודת הפסיקה שצוינה
.container-fluid, שזה width: 100%בכל נקודות השבירה

הטבלה שלהלן ממחישה כיצד כל מיכל max-widthבהשוואה למקור .containerולרוחב .container-fluidכל נקודת שבירה.

ראה אותם בפעולה והשווה אותם בדוגמה של Grid שלנו .

	קטן במיוחד <576 פיקסלים	קָטָן ≥576 פיקסלים	בינוני ≥768 פיקסלים	גָדוֹל ≥992 פיקסלים	אקסטרה לארג ≥1200 פיקסלים	XX-Large ≥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();
}

למידע נוסף ודוגמאות כיצד לשנות את המפות והמשתנים של Sass שלנו, עיין בסעיף Sass בתיעוד ה-Grid .