מרווחים

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

בעמוד זה

שוליים וריפוד

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

משתמשים במודול פריסת ה-CSS Grid? שקול להשתמש בכלי ה- gap במקום זאת.

סִמוּן

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

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

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

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

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

t- לשיעורים שקובעים margin-topאוpadding-top
b- לשיעורים שקובעים margin-bottomאוpadding-bottom
s- (התחלה) לשיעורים שקבעו margin-leftאו padding-leftב-LTR, margin-rightאו padding-rightב-RTL
e- (סוף) לשיעורים שקבעו margin-rightאו padding-rightב-LTR, margin-leftאו padding-leftב-RTL
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;
}

.ms-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לא יכול). שוליים שליליים אלה מושבתים כברירת מחדל , אך ניתן להפעיל אותם ב-Sass על ידי הגדרה $enable-negative-margins: true.

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

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

פער

בעת השימוש display: grid, אתה יכול לעשות שימוש gapבכלי עזר במיכל הרשת האב. זה יכול לחסוך את הצורך להוסיף כלי עזר שוליים לפריטי רשת בודדים (ילדים של display: gridמכולה). כלי השירות של Gap מגיבים כברירת מחדל, והם נוצרים באמצעות API של השירותים שלנו, על סמך $spacersמפת Sass.

פריט רשת 1

פריט רשת 2

פריט רשת 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

התמיכה כוללת אפשרויות תגובה עבור כל נקודות הפסקת הרשת של Bootstrap, כמו גם שישה גדלים $spacersמהמפה ( 0- 5). אין .gap-autoמחלקת שירות מכיוון שהיא למעשה זהה ל- .gap-0.

סאס

מפות

כלי עזר לרווחים מוצהרים באמצעות מפת Sass ואז נוצרים עם ה-API של השירותים שלנו.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

API של Utilities

כלי עזר לרווחים מוצהרים ב-API של השירותים שלנו ב- scss/_utilities.scss. למד כיצד להשתמש בממשק ה-API של השירותים.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),