ספּייסינג

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

וויאזוי עס ארבעט

באַשטימען אָפּרופיק-פרייַנדלעך marginאָדער paddingוואַלועס צו אַן עלעמענט אָדער אַ סאַבסעט פון זייַן זייטן מיט סטענאָגראַפיע קלאסן. כולל שטיצן פֿאַר יחיד פּראָפּערטיעס, אַלע פּראָפּערטיעס און ווערטיקאַל און האָריזאָנטאַל פּראָפּערטיעס. קלאסן זענען געבויט פון אַ פעליקייַט סאַס מאַפּע ריינדזשינג פון .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
• ליידיק - פֿאַר קלאסן וואָס שטעלן אַ 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;
}

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