ಅಂತರ

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

ಈ ಪುಟದಲ್ಲಿ

ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್

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

CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಾ? ಬದಲಿಗೆ ಗ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ .

ಸಂಕೇತ

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

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

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

m- ನಿಗದಿಪಡಿಸಿದ ತರಗತಿಗಳಿಗೆmargin
p- ನಿಗದಿಪಡಿಸಿದ ತರಗತಿಗಳಿಗೆpadding

ಕಡೆಗಳಲ್ಲಿ ಒಂದು :

t- ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ margin-topಅಥವಾpadding-top
b- ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ margin-bottomಅಥವಾpadding-bottom
s- (ಪ್ರಾರಂಭ) ಹೊಂದಿಸುವ margin-leftಅಥವಾ padding-leftLTR ನಲ್ಲಿ margin-rightಅಥವಾ padding-rightRTL ನಲ್ಲಿ ತರಗತಿಗಳಿಗೆ
e- (ಅಂತ್ಯ) ಹೊಂದಿಸುವ margin-rightಅಥವಾ padding-rightLTR ನಲ್ಲಿ margin-leftಅಥವಾ padding-leftRTL ನಲ್ಲಿ ತರಗತಿಗಳಿಗೆ
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;
}

.ms-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ಸಾಧ್ಯವಿಲ್ಲ). ಈ ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ , ಆದರೆ ಹೊಂದಿಸುವ ಮೂಲಕ Sass ನಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು$enable-negative-margins: true .

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

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

ಅಂತರ

ಬಳಸುವಾಗ , ನೀವು ಮೂಲ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು display: gridಬಳಸಬಹುದು . ಇದು ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ( ಕಂಟೇನರ್‌ನ gapಮಕ್ಕಳು) ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಉಳಿಸಬಹುದು . display: gridಗ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸ್ಪಂದಿಸುತ್ತವೆ ಮತ್ತು $spacersಸಾಸ್ ನಕ್ಷೆಯ ಆಧಾರದ ಮೇಲೆ ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ಮೂಲಕ ರಚಿಸಲ್ಪಡುತ್ತವೆ.

ಗ್ರಿಡ್ ಐಟಂ 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>

ಬೆಂಬಲವು ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಿಗೆ ಸ್ಪಂದಿಸುವ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಹಾಗೆಯೇ $spacersನಕ್ಷೆಯಿಂದ ಆರು ಗಾತ್ರಗಳು ( 0- 5). .gap-autoಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಒಂದೇ ಆಗಿರುವುದರಿಂದ ಯಾವುದೇ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವಿಲ್ಲ .gap-0.

ಸಾಸ್

ನಕ್ಷೆಗಳು

ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸಾಸ್ ನಕ್ಷೆಯ ಮೂಲಕ ಘೋಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನೊಂದಿಗೆ ರಚಿಸಲಾಗುತ್ತದೆ.

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

ಉಪಯುಕ್ತತೆಗಳ API

ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ 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
    ),