מרווחים

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>

מרווח שלילי

ב-CSS, marginמאפיינים יכולים להשתמש בערכים שליליים ( paddingלא יכול). החל מ-4.2, הוספנו כלי עזר למרווח שלילי עבור כל גודל של מספר שלם שאינו אפס המפורט לעיל (למשל, 1, 2, 3, 4, 5). כלי עזר אלה אידיאליים להתאמה אישית של מרזבי עמודי רשת על פני נקודות שבירה.

התחביר כמעט זהה לשירותי ברירת המחדל, שוליים חיוביים, אך עם תוספת של nלפני הגודל המבוקש. הנה מחלקה לדוגמה הפוכה מ .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

הנה דוגמה להתאמה אישית של רשת Bootstrap בנקודת הפריצה הבינונית ( md) ומעלה. הגדלנו את .colהריפוד עם .px-md-5ולאחר מכן התנגדו לכך עם .mx-md-n5ההורה .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>