ਵਿੱਥ

ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ

ਸ਼ਾਰਟਹੈਂਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕਿਸੇ ਤੱਤ ਜਾਂ ਇਸਦੇ ਪਾਸਿਆਂ ਦੇ ਉਪ ਸਮੂਹ ਨੂੰ ਜਵਾਬਦੇਹ-ਅਨੁਕੂਲ 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- ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ (ਸ਼ੁਰੂਆਤ) ਜੋ LTR ਵਿੱਚ margin-leftਜਾਂ RTL ਵਿੱਚ ਸੈਟ ਕਰਦੀਆਂ ਹਨpadding-leftmargin-rightpadding-right
• e- (ਅੰਤ) ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ ਜੋ LTR ਵਿੱਚ margin-rightਜਾਂ RTL ਵਿੱਚ ਸੈੱਟ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨpadding-rightmargin-leftpadding-left
• x- ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ ਜੋ ਦੋਨਾਂ ਨੂੰ ਸੈੱਟ ਕਰਦੇ ਹਨ *-leftਅਤੇ*-right
• y- ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ ਜੋ ਦੋਨਾਂ ਨੂੰ ਸੈੱਟ ਕਰਦੇ ਹਨ *-topਅਤੇ*-bottom
• ਖਾਲੀ - ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ ਜੋ ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ 4 ਪਾਸਿਆਂ 'ਤੇ marginਜਾਂ ਸੈਟ ਕਰਦੀਆਂ ਹਨpadding

ਜਿੱਥੇ ਆਕਾਰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ:

• 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ਆਟੋ 'ਤੇ ਸੈੱਟ ਕਰਦੇ ਹਨ

$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ਦੇ ਅਧਾਰ ਤੇ, ਸਾਡੀ ਉਪਯੋਗਤਾ API ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ।$spacers

<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,
);

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

ਉਪਯੋਗਤਾ 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
    ),