ਵਿੱਥ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਸੋਧਣ ਲਈ ਸ਼ਾਰਟਹੈਂਡ ਜਵਾਬਦੇਹ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ, ਅਤੇ ਗੈਪ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਵਿਸ਼ਾਲ ਸ਼੍ਰੇਣੀ ਸ਼ਾਮਲ ਹੈ।

ਇਸ ਪੰਨੇ 'ਤੇ

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

ਸ਼ਾਰਟਹੈਂਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕਿਸੇ ਤੱਤ ਜਾਂ ਇਸਦੇ ਪਾਸਿਆਂ ਦੇ ਉਪ ਸਮੂਹ ਨੂੰ ਜਵਾਬਦੇਹ-ਅਨੁਕੂਲ 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(ਤੁਸੀਂ Sass ਮੈਪ ਵੇਰੀਏਬਲ ਵਿੱਚ ਐਂਟਰੀਆਂ ਜੋੜ ਕੇ ਹੋਰ ਆਕਾਰ ਜੋੜ ਸਕਦੇ ਹੋ ।)

ਉਦਾਹਰਨਾਂ

ਇੱਥੇ ਇਹਨਾਂ ਕਲਾਸਾਂ ਦੀਆਂ ਕੁਝ ਪ੍ਰਤੀਨਿਧ ਉਦਾਹਰਣਾਂ ਹਨ:

.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

ਗਰਿੱਡ ਆਈਟਮ 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
    ),