מרווחים

Bootstrap כולל מגוון רחב של שיעורי שוליים מגיבים בקצרה וריפוד כדי לשנות את המראה של אלמנט.

איך זה עובד

הקצה ערכים ידידותיים לתגובה לאלמנט או קבוצת משנה של הצדדים שלו עם מחלקות קיצור margin. paddingכולל תמיכה בנכסים בודדים, כל המאפיינים ומאפיינים אנכיים ואופקיים. השיעורים בנויים ממפת ברירת מחדל של Sass הנעה בין .25remל- 3rem.

סִמוּן

כלי עזר לרווחים החלים על כל נקודות השבירה, מ xs-עד xl, אינם מכילים קיצור של נקודת שבירה. הסיבה לכך היא שהמחלקות הללו מיושמות מלמעלה min-width: 0ומעלה, ולפיכך אינן קשורות לשאילתת מדיה. עם זאת, נקודות הפסיקה הנותרות כוללות קיצור של נקודת הפסקה.

הכיתות נקראות באמצעות הפורמט {property}{sides}-{size}עבור xsועבור {property}{sides}-{breakpoint}-{size}, sm, mdו lg.xl

כאשר הנכס הוא אחד מ:

• m- לשיעורים שקבעוmargin
• p- לשיעורים שקבעוpadding

כאשר הצדדים הוא אחד מ:

• t- לשיעורים שקובעים margin-topאוpadding-top
• b- לשיעורים שקובעים margin-bottomאוpadding-bottom
• l- לשיעורים שקובעים margin-leftאוpadding-left
• r- לשיעורים שקובעים margin-rightאוpadding-right
• x- לשיעורים שקובעים גם *-leftוגם*-right
• y- לשיעורים שקובעים גם *-topוגם*-bottom
• ריק - עבור מחלקות שמגדירות a marginאו paddingבכל 4 הצדדים של האלמנט

כאשר הגודל הוא אחד מ:

• 0- לשיעורים שמבטלים את marginאו paddingעל ידי הגדרתו0
• 1- (כברירת מחדל) עבור מחלקות שמגדירות את marginאו paddingל$spacer * .25
• 2- (כברירת מחדל) עבור מחלקות שמגדירות את marginאו paddingל$spacer * .5
• 3- (כברירת מחדל) עבור מחלקות שמגדירות את marginאו paddingל$spacer
• 4- (כברירת מחדל) עבור מחלקות שמגדירות את marginאו paddingל$spacer * 1.5
• 5- (כברירת מחדל) עבור מחלקות שמגדירות את marginאו paddingל$spacer * 3
• auto- עבור מחלקות שמגדירות את marginהאוטומטי

(תוכל להוסיף גדלים נוספים על ידי הוספת ערכים $spacersלמשתנה המפה של Sass.)

דוגמאות

להלן כמה דוגמאות מייצגות של שיעורים אלה:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

מרכוז אופקי

בנוסף, Bootstrap כולל גם .mx-autoמחלקה למרכז אופקי של תוכן ברמת בלוק ברוחב קבוע - כלומר, תוכן שיש לו display: blockוקבוצה width- על ידי הגדרת השוליים האופקיים ל- auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>