ಅಂತರ

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

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

ಒಂದು ಅಂಶ ಅಥವಾ ಅದರ ಬದಿಗಳ ಉಪವಿಭಾಗಕ್ಕೆ ಸಂಕ್ಷಿಪ್ತ ವರ್ಗಗಳೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ-ಸ್ನೇಹಿ 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>

ಋಣಾತ್ಮಕ ಅಂಚು

CSS ನಲ್ಲಿ, marginಗುಣಲಕ್ಷಣಗಳು ಋಣಾತ್ಮಕ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು ( paddingಸಾಧ್ಯವಿಲ್ಲ). 4.2 ರಂತೆ, ಮೇಲೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಪ್ರತಿ ಶೂನ್ಯವಲ್ಲದ ಪೂರ್ಣಾಂಕ ಗಾತ್ರಕ್ಕೆ ನಾವು ಋಣಾತ್ಮಕ ಅಂಚು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ (ಉದಾ, 1, 2, 3, 4, 5). ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಾದ್ಯಂತ ಗ್ರಿಡ್ ಕಾಲಮ್ ಗಟರ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಈ ಉಪಯುಕ್ತತೆಗಳು ಸೂಕ್ತವಾಗಿವೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್ ಡೀಫಾಲ್ಟ್, ಧನಾತ್ಮಕ ಅಂಚು ಉಪಯುಕ್ತತೆಗಳಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ nವಿನಂತಿಸಿದ ಗಾತ್ರದ ಮೊದಲು ಸೇರ್ಪಡೆಯೊಂದಿಗೆ. ಇದಕ್ಕೆ ವಿರುದ್ಧವಾದ ವರ್ಗದ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .mt-1:

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

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>