ספּייסינג

באָאָטסטראַפּ ינקלודז אַ ברייט קייט פון ריסטריקשאַן אָפּרופיק גרענעץ, וואַטן און ריס נוצן קלאסן צו מאָדיפיצירן די אויסזען פון אַן עלעמענט.

אויף דעם בלאַט

גרענעץ און וואַטן

באַשטימען אָפּרופיק-פרייַנדלעך marginאָדער paddingוואַלועס צו אַן עלעמענט אָדער אַ סאַבסעט פון זייַן זייטן מיט סטענאָגראַפיע קלאסן. כולל שטיצן פֿאַר יחיד פּראָפּערטיעס, אַלע פּראָפּערטיעס און ווערטיקאַל און האָריזאָנטאַל פּראָפּערטיעס. קלאסן זענען געבויט פון אַ פעליקייַט סאַס מאַפּע ריינדזשינג פון .25remצו 3rem.

ניצן די CSS גריד אויסלייג מאָדולע? באַטראַכטן ניצן די גאַפּ נוצן .

נאָטאַציע

ספּייסינג יוטילאַטיז וואָס אַפּלייז צו אַלע ברייקפּאָינץ, פֿון 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
ליידיק - פֿאַר קלאסן וואָס שטעלן אַ 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צו אַוטאָ

(איר קענען לייגן מער סיזעס דורך אַדינג איינסן צו די $spacersSass מאַפּע בייַטעוודיק.)

ביישפילן

דאָ זענען עטלעכע רעפּריזענאַטיוו ביישפילן פון די קלאסן:

.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.

די סינטאַקס איז כּמעט די זעלבע ווי די פעליקייַט, positive גרענעץ יוטילאַטיז, אָבער מיט די אַדישאַן פון nאיידער די געבעטן גרייס. דאָ ס אַ בייַשפּיל קלאַס וואָס איז די פאַרקערט פון .mt-1:

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

גאַפּ

ווען איר נוצן display: grid, איר קענען נוצן gapיוטילאַטיז אויף די פאָטער גריד קאַנטיינער. דאָס קען שפּאָרן אויף צו לייגן גרענעץ יוטילאַטיז צו יחיד גריד זאכן (קינדער פון אַ display: gridקאַנטיינער). גאַפּ יוטילאַטיז זענען אָפּרופיק דורך פעליקייַט, און זענען דזשענערייטאַד דורך אונדזער יוטילאַטיז אַפּי, באזירט אויף די $spacersSass מאַפּע.

גריד נומער 1

גריד נומער 2

גריד נומער 3

<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 מאַפּע און דערנאָך דזשענערייטאַד מיט אונדזער יוטילאַטיז אַפּי.

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

ספּייסינג יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities 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
    ),