ਵਿੱਥ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਤੱਤ ਦੀ ਦਿੱਖ ਨੂੰ ਸੋਧਣ ਲਈ ਸ਼ਾਰਟਹੈਂਡ ਜਵਾਬਦੇਹ ਹਾਸ਼ੀਏ ਅਤੇ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਵਿਸ਼ਾਲ ਸ਼੍ਰੇਣੀ ਸ਼ਾਮਲ ਹੈ।
ਕਿਦਾ ਚਲਦਾ
ਸ਼ਾਰਟਹੈਂਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕਿਸੇ ਤੱਤ ਜਾਂ ਇਸਦੇ ਪਾਸਿਆਂ ਦੇ ਉਪ ਸਮੂਹ ਨੂੰ ਜਵਾਬਦੇਹ-ਅਨੁਕੂਲ margin
ਜਾਂ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰੋ। padding
ਵਿਅਕਤੀਗਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਅਤੇ ਲੰਬਕਾਰੀ ਅਤੇ ਖਿਤਿਜੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਕਲਾਸਾਂ ਨੂੰ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਾਸ ਮੈਪ ਤੋਂ ਲੈ ਕੇ ਬਣਾਇਆ .25rem
ਜਾਂਦਾ ਹੈ 3rem
।
ਨੋਟੇਸ਼ਨ
ਸਪੇਸਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਜੋ ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ, ਤੋਂ ਲੈ xs
ਕੇ xl
, ਉਹਨਾਂ ਵਿੱਚ ਕੋਈ ਬ੍ਰੇਕਪੁਆਇੰਟ ਸੰਖੇਪ ਨਹੀਂ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਉਹ ਕਲਾਸਾਂ ਨੂੰ min-width: 0
ਅਤੇ ਉੱਪਰ ਤੋਂ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਦੁਆਰਾ ਬੰਨ੍ਹਿਆ ਨਹੀਂ ਜਾਂਦਾ ਹੈ। ਬਾਕੀ ਬਚੇ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ ਵਿੱਚ, ਹਾਲਾਂਕਿ, ਇੱਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਸੰਖੇਪ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ।
ਕਲਾਸਾਂ ਦਾ ਨਾਮ , , , ਅਤੇ {property}{sides}-{size}
ਲਈ ਫਾਰਮੈਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੱਖਿਆ ਗਿਆ ਹੈ ।xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
ਜਿੱਥੇ ਜਾਇਦਾਦ ਇਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ:
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>