ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਉਪਯੋਗਤਾ 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ਕੰਟਰੋਲ ਡਾਇਰੈਕਟਿਵ ਦਾ ਧੰਨਵਾਦ ।