ಅಂತರ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಒಂದು ಅಂಶದ ನೋಟವನ್ನು ಮಾರ್ಪಡಿಸಲು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾರ್ಜಿನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಒಂದು ಅಂಶ ಅಥವಾ ಅದರ ಬದಿಗಳ ಉಪವಿಭಾಗಕ್ಕೆ ಸಂಕ್ಷಿಪ್ತ ವರ್ಗಗಳೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ-ಸ್ನೇಹಿ marginಅಥವಾ ಮೌಲ್ಯಗಳನ್ನು ನಿಯೋಜಿಸಿ. paddingವೈಯಕ್ತಿಕ ಗುಣಲಕ್ಷಣಗಳು, ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ. .25remನಿಂದ ಹಿಡಿದು ಡೀಫಾಲ್ಟ್ ಸಾಸ್ ನಕ್ಷೆಯಿಂದ ತರಗತಿಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ 3rem.

ಸಂಕೇತ

ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುವ ಅಂತರ ಉಪಯುಕ್ತತೆಗಳು, ನಿಂದ xsವರೆಗೆ xl, ಅವುಗಳಲ್ಲಿ ಯಾವುದೇ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಸಂಕ್ಷೇಪಣವಿಲ್ಲ. ಏಕೆಂದರೆ ಆ ವರ್ಗಗಳನ್ನು min-width: 0ಮೇಲಕ್ಕೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಹೀಗಾಗಿ ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗೆ ಬದ್ಧವಾಗಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಉಳಿದ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಸಂಕ್ಷೇಪಣವನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

, , , ಮತ್ತು {property}{sides}-{size}ಫಾರ್ xsಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ತರಗತಿಗಳನ್ನು ಹೆಸರಿಸಲಾಗಿದೆ .{property}{sides}-{breakpoint}-{size}smmdlgxl

ಆಸ್ತಿ ಇವುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ:

• 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
• 1margin- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾ paddingಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * .25
• 2margin- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾ paddingಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * .5
• 3margin- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾ paddingಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer
• 4margin- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾ paddingಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * 1.5
• 5margin- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾ paddingಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * 3
• automargin- ಸ್ವಯಂ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ

$spacers( ಸಾಸ್ ಮ್ಯಾಪ್ ವೇರಿಯೇಬಲ್‌ಗೆ ನಮೂದುಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಹೆಚ್ಚಿನ ಗಾತ್ರಗಳನ್ನು ಸೇರಿಸಬಹುದು .)

ಉದಾಹರಣೆಗಳು

ಈ ವರ್ಗಗಳ ಕೆಲವು ಪ್ರತಿನಿಧಿ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

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

ಸಮತಲ ಕೇಂದ್ರೀಕರಣ

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ .mx-autoಸ್ಥಿರ-ಅಗಲ ಬ್ಲಾಕ್ ಮಟ್ಟದ ವಿಷಯವನ್ನು ಸಮತಲವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಒಂದು ವರ್ಗವನ್ನು ಒಳಗೊಂಡಿದೆ-ಅಂದರೆ, ಹೊಂದಿರುವ ವಿಷಯ display: blockಮತ್ತು widthಸೆಟ್-ಗೆ ಸಮತಲ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ auto.

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