דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

מיכלים

קונטיינרים הם אבן בניין בסיסית של 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 .