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