ਵਿੱਥ

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

ਕਿਦਾ ਚਲਦਾ

ਸ਼ਾਰਟਹੈਂਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕਿਸੇ ਤੱਤ ਜਾਂ ਇਸਦੇ ਪਾਸਿਆਂ ਦੇ ਉਪ ਸਮੂਹ ਨੂੰ ਜਵਾਬਦੇਹ-ਅਨੁਕੂਲ 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
• ਖਾਲੀ - ਉਹਨਾਂ ਕਲਾਸਾਂ ਲਈ ਜੋ ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ 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;
}

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