מיכלים
קונטיינרים הם אבן בניין בסיסית של Bootstrap המכילים, מרפדים ומיישרים את התוכן שלך בתוך מכשיר או נקודת מבט נתונה.
איך הם עובדים
קונטיינרים הם אלמנט הפריסה הבסיסי ביותר ב-Bootstrap והם נדרשים בעת שימוש במערכת ברירת המחדל שלנו . מיכלים משמשים להכיל, לרפד ו(לפעמים) למרכז את התוכן בתוכם. אמנם ניתן לקנן מיכלים, אך רוב הפריסות אינן דורשות מיכל מקונן.
Bootstrap מגיע עם שלושה מיכלים שונים:
.container
, שקובע amax-width
בכל נקודת שבירה מגיבה.container-fluid
, שזהwidth: 100%
בכל נקודות השבירה.container-{breakpoint}
, שזהwidth: 100%
עד לנקודת הפסיקה שצוינה
הטבלה שלהלן ממחישה כיצד כל מיכל max-width
בהשוואה למקור .container
ולרוחב .container-fluid
כל נקודת שבירה.
ראה אותם בפעולה והשווה אותם בדוגמה של Grid שלנו .
קטן במיוחד <576 פיקסלים |
קטן ≥576 פיקסלים |
בינוני ≥768 פיקסלים |
גדול ≥992 פיקסלים |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.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-width
s עבור כל אחת מנקודות הפסיקה הגבוהות יותר. לדוגמה, .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 .