ਉਪਯੋਗਤਾ API
ਉਪਯੋਗਤਾ API ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ Sass-ਅਧਾਰਿਤ ਟੂਲ ਹੈ।
ਬੂਟਸਟਰੈਪ ਉਪਯੋਗਤਾਵਾਂ ਸਾਡੀ ਉਪਯੋਗਤਾ API ਨਾਲ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ Sass ਦੁਆਰਾ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਸਾਡੇ ਡਿਫੌਲਟ ਸੈੱਟ ਨੂੰ ਸੋਧਣ ਜਾਂ ਵਧਾਉਣ ਲਈ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਸਾਡੀ ਉਪਯੋਗਤਾ API ਵੱਖ-ਵੱਖ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਕਲਾਸਾਂ ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ Sass ਨਕਸ਼ਿਆਂ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਇੱਕ ਲੜੀ 'ਤੇ ਅਧਾਰਤ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ Sass ਨਕਸ਼ਿਆਂ ਤੋਂ ਅਣਜਾਣ ਹੋ, ਤਾਂ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਅਧਿਕਾਰਤ Sass ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਪੜ੍ਹੋ ।
ਨਕਸ਼ੇ ਵਿੱਚ $utilities
ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਤੁਹਾਡੇ ਕਸਟਮ ਨਕਸ਼ੇ ਨਾਲ ਮਿਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ $utilities
, ਜੇਕਰ ਮੌਜੂਦ ਹੈ। ਉਪਯੋਗਤਾ ਨਕਸ਼ੇ ਵਿੱਚ ਉਪਯੋਗਤਾ ਸਮੂਹਾਂ ਦੀ ਇੱਕ ਮੁੱਖ ਸੂਚੀ ਹੁੰਦੀ ਹੈ ਜੋ ਹੇਠਾਂ ਦਿੱਤੇ ਵਿਕਲਪਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ:
ਵਿਕਲਪ | ਟਾਈਪ ਕਰੋ | ਵਰਣਨ |
---|---|---|
property |
ਲੋੜੀਂਦਾ ਹੈ | ਸੰਪੱਤੀ ਦਾ ਨਾਮ, ਇਹ ਇੱਕ ਸਤਰ ਜਾਂ ਤਾਰਾਂ ਦੀ ਇੱਕ ਲੜੀ ਹੋ ਸਕਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਹਰੀਜੱਟਲ ਪੈਡਿੰਗ ਜਾਂ ਹਾਸ਼ੀਏ)। |
values |
ਲੋੜੀਂਦਾ ਹੈ | ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ, ਜਾਂ ਇੱਕ ਨਕਸ਼ਾ ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਕਲਾਸ ਦਾ ਨਾਮ ਮੁੱਲ ਦੇ ਸਮਾਨ ਹੋਵੇ। ਜੇਕਰ null ਮੈਪ ਕੁੰਜੀ ਦੇ ਤੌਰ 'ਤੇ ਵਰਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਹ ਕੰਪਾਇਲ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। |
class |
ਵਿਕਲਪਿਕ | ਕਲਾਸ ਦੇ ਨਾਮ ਲਈ ਵੇਰੀਏਬਲ ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਇਹ ਸੰਪਤੀ ਦੇ ਸਮਾਨ ਹੋਵੇ। ਜੇਕਰ ਤੁਸੀਂ ਕੁੰਜੀ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦੇ ਹੋ class ਅਤੇ property ਕੁੰਜੀ ਸਤਰ ਦੀ ਇੱਕ ਐਰੇ ਹੈ, ਤਾਂ ਕਲਾਸ ਦਾ ਨਾਮ ਐਰੇ ਦਾ ਪਹਿਲਾ ਤੱਤ ਹੋਵੇਗਾ property । |
state |
ਵਿਕਲਪਿਕ | ਸੂਡੋ-ਸ਼੍ਰੇਣੀ ਦੇ ਰੂਪਾਂ ਦੀ ਸੂਚੀ ਜਿਵੇਂ ਕਿ ਉਪਯੋਗਤਾ ਲਈ ਤਿਆਰ ਕਰਨਾ :hover ਜਾਂ ਬਣਾਉਣਾ ਹੈ। :focus ਕੋਈ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਨਹੀਂ। |
responsive |
ਵਿਕਲਪਿਕ | ਬੂਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਨੂੰ ਤਿਆਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। false ਮੂਲ ਰੂਪ ਵਿੱਚ. |
rfs |
ਵਿਕਲਪਿਕ | ਤਰਲ ਰੀਸਕੇਲਿੰਗ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਬੂਲੀਅਨ। ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਹ ਜਾਣਨ ਲਈ RFS ਪੰਨੇ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ । false ਮੂਲ ਰੂਪ ਵਿੱਚ. |
print |
ਵਿਕਲਪਿਕ | ਬੁਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਪ੍ਰਿੰਟ ਕਲਾਸਾਂ ਨੂੰ ਤਿਆਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। false ਮੂਲ ਰੂਪ ਵਿੱਚ. |
rtl |
ਵਿਕਲਪਿਕ | ਬੂਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਉਪਯੋਗਤਾ ਨੂੰ RTL ਵਿੱਚ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। true ਮੂਲ ਰੂਪ ਵਿੱਚ. |
API ਸਮਝਾਇਆ
ਸਾਰੇ ਉਪਯੋਗਤਾ ਵੇਰੀਏਬਲ $utilities
ਸਾਡੀ _utilities.scss
ਸਟਾਈਲਸ਼ੀਟ ਦੇ ਅੰਦਰ ਵੇਰੀਏਬਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ। ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਹਰੇਕ ਸਮੂਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ਜੋ ਹੇਠ ਲਿਖੇ ਨੂੰ ਆਉਟਪੁੱਟ ਕਰਦਾ ਹੈ:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
ਕਸਟਮ ਕਲਾਸ ਅਗੇਤਰ
class
ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਵਰਤੇ ਗਏ ਕਲਾਸ ਪ੍ਰੀਫਿਕਸ ਨੂੰ ਬਦਲਣ ਲਈ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ :
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ਆਉਟਪੁੱਟ:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
ਰਾਜ
state
ਸੂਡੋ-ਕਲਾਸ ਭਿੰਨਤਾਵਾਂ ਬਣਾਉਣ ਲਈ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਉਦਾਹਰਨ ਸੂਡੋ-ਕਲਾਸ ਹਨ :hover
ਅਤੇ :focus
. ਜਦੋਂ ਰਾਜਾਂ ਦੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਉਸ ਸੂਡੋ-ਕਲਾਸ ਲਈ ਕਲਾਸਨਾਮ ਬਣਾਏ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਹੋਵਰ 'ਤੇ ਧੁੰਦਲਾਪਨ ਬਦਲਣ ਲਈ, ਜੋੜੋ state: hover
ਅਤੇ ਤੁਸੀਂ .opacity-hover:hover
ਆਪਣੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰੋਗੇ।
ਕਈ ਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਲੋੜ ਹੈ? ਰਾਜਾਂ ਦੀ ਸਪੇਸ-ਵੱਖ ਕੀਤੀ ਸੂਚੀ ਦੀ ਵਰਤੋਂ ਕਰੋ: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ਆਉਟਪੁੱਟ:
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾਵਾਂ
ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟਸresponsive
ਵਿੱਚ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾਵਾਂ (ਉਦਾਹਰਨ ਲਈ, .opacity-md-25
) ਬਣਾਉਣ ਲਈ ਬੂਲੀਅਨ ਸ਼ਾਮਲ ਕਰੋ ।
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ਆਉਟਪੁੱਟ:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਬਦਲਣਾ
ਉਸੇ ਕੁੰਜੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੌਜੂਦਾ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਵਾਧੂ ਜਵਾਬਦੇਹ ਓਵਰਫਲੋ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ਪ੍ਰਿੰਟ ਉਪਯੋਗਤਾਵਾਂ
print
ਵਿਕਲਪ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਨਾਲ ਪ੍ਰਿੰਟ ਲਈ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਵੀ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ, ਜੋ ਸਿਰਫ @media print { ... }
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਵਿੱਚ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ।
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ਆਉਟਪੁੱਟ:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
ਮਹੱਤਵ
API ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀਆਂ ਸਾਰੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ !important
ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਸ਼ਾਮਲ ਹੈ ਕਿ ਉਹ ਇਰਾਦੇ ਅਨੁਸਾਰ ਭਾਗਾਂ ਅਤੇ ਸੋਧਕ ਕਲਾਸਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਇਸ ਸੈਟਿੰਗ ਨੂੰ $enable-important-utilities
ਵੈਰੀਏਬਲ (ਡਿਫੌਲਟ ਲਈ true
) ਨਾਲ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ।
API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ
ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਉਪਯੋਗਤਾ API ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਤੋਂ ਜਾਣੂ ਹੋ, ਤਾਂ ਸਿੱਖੋ ਕਿ ਆਪਣੀਆਂ ਖੁਦ ਦੀਆਂ ਕਸਟਮ ਕਲਾਸਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ ਅਤੇ ਸਾਡੀਆਂ ਡਿਫੌਲਟ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਕਿਵੇਂ ਸੋਧਣਾ ਹੈ।
ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰੋ
$utilities
ਡਿਫਾਲਟ ਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਨਾਲ ਨਵੀਆਂ ਸਹੂਲਤਾਂ ਜੋੜੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ map-merge
। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਡੀਆਂ ਲੋੜੀਂਦੀਆਂ Sass ਫਾਈਲਾਂ ਅਤੇ _utilities.scss
ਪਹਿਲਾਂ ਆਯਾਤ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ, ਫਿਰ map-merge
ਆਪਣੀਆਂ ਵਾਧੂ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ cursor
ਤਿੰਨ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਇੱਕ ਜਵਾਬਦੇਹ ਉਪਯੋਗਤਾ ਨੂੰ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸੋਧੋ
$utilities
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਨਕਸ਼ੇ map-get
ਅਤੇ map-merge
ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਮੌਜੂਦਾ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸੋਧੋ । ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ width
ਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ ਇੱਕ ਵਾਧੂ ਮੁੱਲ ਜੋੜ ਰਹੇ ਹਾਂ। ਸ਼ੁਰੂਆਤੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ map-merge
ਅਤੇ ਫਿਰ ਦੱਸੋ ਕਿ ਤੁਸੀਂ ਕਿਹੜੀ ਸਹੂਲਤ ਨੂੰ ਸੋਧਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਉੱਥੋਂ, ਉਪਯੋਗਤਾ ਦੇ ਵਿਕਲਪਾਂ ਅਤੇ ਮੁੱਲਾਂ ਤੱਕ ਪਹੁੰਚ ਅਤੇ ਸੋਧ ਕਰਨ ਲਈ ਨੇਸਟਡ "width"
ਮੈਪ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੋ।map-get
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
ਜਵਾਬਦੇਹ ਚਾਲੂ ਕਰੋ
ਤੁਸੀਂ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਮੌਜੂਦਾ ਸੈੱਟ ਲਈ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਵਰਤਮਾਨ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, border
ਕਲਾਸਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਲਈ:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
ਇਹ ਹੁਣ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੇ .border
ਅਤੇ ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਪੈਦਾ ਕਰੇਗਾ। .border-0
ਤੁਹਾਡਾ ਤਿਆਰ ਕੀਤਾ CSS ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਬਦਲੋ
ਗੁੰਮ v4 ਉਪਯੋਗਤਾਵਾਂ, ਜਾਂ ਕਿਸੇ ਹੋਰ ਨਾਮਕਰਨ ਸੰਮੇਲਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ? class
ਯੂਟਿਲਟੀਜ਼ API ਦੀ ਵਰਤੋਂ ਦਿੱਤੀ ਗਈ ਉਪਯੋਗਤਾ ਦੇ ਨਤੀਜੇ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ — ਉਦਾਹਰਨ ਲਈ, .ms-*
ਉਪਯੋਗਤਾਵਾਂ ਦਾ ਨਾਮ ਪੁਰਾਣਾ ਕਰਨ ਲਈ .ml-*
:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਹਟਾਓ
ਗਰੁੱਪ ਕੁੰਜੀ ਨੂੰ ਸੈੱਟ ਕਰਕੇ ਕਿਸੇ ਵੀ ਡਿਫਾਲਟ ਉਪਯੋਗਤਾ ਨੂੰ ਹਟਾਓ null
। ਉਦਾਹਰਨ ਲਈ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ width
ਸਹੂਲਤਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ, ਇੱਕ ਬਣਾਓ $utilities
map-merge
ਅਤੇ "width": null
ਅੰਦਰ ਜੋੜੋ।
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
RTL ਵਿੱਚ ਉਪਯੋਗਤਾ ਨੂੰ ਹਟਾਓ
ਕੁਝ ਕਿਨਾਰੇ ਦੇ ਕੇਸ RTL ਸਟਾਈਲਿੰਗ ਨੂੰ ਮੁਸ਼ਕਲ ਬਣਾਉਂਦੇ ਹਨ , ਜਿਵੇਂ ਕਿ ਅਰਬੀ ਵਿੱਚ ਲਾਈਨ ਬਰੇਕ। rtl
ਇਸ ਤਰ੍ਹਾਂ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਵਿਕਲਪ ਨੂੰ ਸੈੱਟ ਕਰਕੇ RTL ਆਉਟਪੁੱਟ ਤੋਂ ਛੱਡਿਆ ਜਾ ਸਕਦਾ ਹੈ false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
ਆਉਟਪੁੱਟ:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
ਇਹ RTL ਵਿੱਚ ਕੁਝ ਵੀ ਆਉਟਪੁੱਟ ਨਹੀਂ ਕਰਦਾ ਹੈ, RTLCSS remove
ਕੰਟਰੋਲ ਡਾਇਰੈਕਟਿਵ ਦਾ ਧੰਨਵਾਦ ।