ਉਪਯੋਗਤਾ API

ਉਪਯੋਗਤਾ API ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ Sass-ਅਧਾਰਿਤ ਟੂਲ ਹੈ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਬੂਟਸਟਰੈਪ ਉਪਯੋਗਤਾਵਾਂ ਸਾਡੀ ਉਪਯੋਗਤਾ API ਨਾਲ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ Sass ਦੁਆਰਾ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਸਾਡੇ ਡਿਫੌਲਟ ਸੈੱਟ ਨੂੰ ਸੋਧਣ ਜਾਂ ਵਧਾਉਣ ਲਈ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਸਾਡੀ ਉਪਯੋਗਤਾ API ਵੱਖ-ਵੱਖ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਕਲਾਸਾਂ ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ Sass ਨਕਸ਼ਿਆਂ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਇੱਕ ਲੜੀ 'ਤੇ ਅਧਾਰਤ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ Sass ਨਕਸ਼ਿਆਂ ਤੋਂ ਅਣਜਾਣ ਹੋ, ਤਾਂ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਅਧਿਕਾਰਤ Sass ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਪੜ੍ਹੋ ।

ਨਕਸ਼ੇ ਵਿੱਚ $utilitiesਸਾਡੀਆਂ ਸਾਰੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਤੁਹਾਡੇ ਕਸਟਮ ਨਕਸ਼ੇ ਨਾਲ ਮਿਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ $utilities, ਜੇਕਰ ਮੌਜੂਦ ਹੈ। ਉਪਯੋਗਤਾ ਨਕਸ਼ੇ ਵਿੱਚ ਉਪਯੋਗਤਾ ਸਮੂਹਾਂ ਦੀ ਇੱਕ ਮੁੱਖ ਸੂਚੀ ਹੁੰਦੀ ਹੈ ਜੋ ਹੇਠਾਂ ਦਿੱਤੇ ਵਿਕਲਪਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ:

ਵਿਕਲਪ	ਟਾਈਪ ਕਰੋ	ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ	ਵਰਣਨ
`property`	ਲੋੜੀਂਦਾ ਹੈ	-	ਸੰਪੱਤੀ ਦਾ ਨਾਮ, ਇਹ ਇੱਕ ਸਤਰ ਜਾਂ ਤਾਰਾਂ ਦੀ ਇੱਕ ਲੜੀ ਹੋ ਸਕਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਹਰੀਜੱਟਲ ਪੈਡਿੰਗ ਜਾਂ ਹਾਸ਼ੀਏ)।
`values`	ਲੋੜੀਂਦਾ ਹੈ	-	ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ, ਜਾਂ ਇੱਕ ਨਕਸ਼ਾ ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਕਲਾਸ ਦਾ ਨਾਮ ਮੁੱਲ ਦੇ ਸਮਾਨ ਹੋਵੇ। ਜੇਕਰ `null`ਮੈਪ ਕੁੰਜੀ ਦੇ ਤੌਰ 'ਤੇ ਵਰਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਹ ਕੰਪਾਇਲ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
`class`	ਵਿਕਲਪਿਕ	null	ਤਿਆਰ ਕੀਤੀ ਕਲਾਸ ਦਾ ਨਾਮ। ਜੇਕਰ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕੀਤੀ ਗਈ `property`ਹੈ ਅਤੇ ਸਤਰਾਂ ਦੀ ਇੱਕ ਐਰੇ ਹੈ, ਤਾਂ ਐਰੇ `class`ਦੇ ਪਹਿਲੇ ਤੱਤ ਲਈ ਡਿਫੌਲਟ ਹੋਵੇਗੀ `property`।
`css-var`	ਵਿਕਲਪਿਕ	`false`	CSS ਨਿਯਮਾਂ ਦੀ ਬਜਾਏ CSS ਵੇਰੀਏਬਲ ਬਣਾਉਣ ਲਈ ਬੁਲੀਅਨ।
`local-vars`	ਵਿਕਲਪਿਕ	null	CSS ਨਿਯਮਾਂ ਤੋਂ ਇਲਾਵਾ ਬਣਾਉਣ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦਾ ਨਕਸ਼ਾ।
`state`	ਵਿਕਲਪਿਕ	null	ਬਣਾਉਣ ਲਈ ਸੂਡੋ-ਕਲਾਸ ਵੇਰੀਐਂਟਸ (ਉਦਾਹਰਨ ਲਈ, `:hover`ਜਾਂ `:focus`) ਦੀ ਸੂਚੀ।
`responsive`	ਵਿਕਲਪਿਕ	`false`	ਬੂਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
`rfs`	ਵਿਕਲਪਿਕ	`false`	RFS ਨਾਲ ਤਰਲ ਰੀਸਕੇਲਿੰਗ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਬੂਲੀਅਨ ।
`print`	ਵਿਕਲਪਿਕ	`false`	ਬੁਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਪ੍ਰਿੰਟ ਕਲਾਸਾਂ ਨੂੰ ਤਿਆਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
`rtl`	ਵਿਕਲਪਿਕ	`true`	ਬੂਲੀਅਨ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਉਪਯੋਗਤਾ ਨੂੰ RTL ਵਿੱਚ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

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; }

ਜਾਇਦਾਦ

ਲੋੜੀਂਦੀ propertyਕੁੰਜੀ ਕਿਸੇ ਵੀ ਉਪਯੋਗਤਾ ਲਈ ਸੈੱਟ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਇਸ ਵਿੱਚ ਇੱਕ ਵੈਧ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ ਸੰਪੱਤੀ ਉਤਪੰਨ ਉਪਯੋਗਤਾ ਦੇ ਨਿਯਮਾਂ ਵਿੱਚ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਜਦੋਂ classਕੁੰਜੀ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਡਿਫੌਲਟ ਕਲਾਸ ਨਾਮ ਵਜੋਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ। text-decorationਉਪਯੋਗਤਾ 'ਤੇ ਗੌਰ ਕਰੋ :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

ਆਉਟਪੁੱਟ:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

ਮੁੱਲ

ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੁੰਜੀ ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ valuesਨਿਰਦਿਸ਼ਟ ਲਈ ਕਿਹੜੇ ਮੁੱਲ propertyਤਿਆਰ ਕੀਤੇ ਗਏ ਕਲਾਸ ਦੇ ਨਾਮ ਅਤੇ ਨਿਯਮਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ। ਇੱਕ ਸੂਚੀ ਜਾਂ ਨਕਸ਼ਾ ਹੋ ਸਕਦਾ ਹੈ (ਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ ਜਾਂ Sass ਵੇਰੀਏਬਲ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।

ਇੱਕ ਸੂਚੀ ਦੇ ਰੂਪ ਵਿੱਚ, ਜਿਵੇਂ ਕਿ text-decorationਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ :

values: none underline line-through

ਇੱਕ ਨਕਸ਼ੇ ਦੇ ਰੂਪ ਵਿੱਚ, ਜਿਵੇਂ ਕਿ opacityਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

ਇੱਕ Sass ਵੇਰੀਏਬਲ ਵਜੋਂ ਜੋ ਸੂਚੀ ਜਾਂ ਨਕਸ਼ੇ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਾਡੀਆਂ positionਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ :

values: $position-values

ਕਲਾਸ

classਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਵਰਤੇ ਗਏ ਕਲਾਸ ਪ੍ਰੀਫਿਕਸ ਨੂੰ ਬਦਲਣ ਲਈ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਉਦਾਹਰਨ ਲਈ, ਤੋਂ ਇਸ ਵਿੱਚ ਬਦਲਣ .opacity-*ਲਈ .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ਆਉਟਪੁੱਟ:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

CSS ਵੇਰੀਏਬਲ ਉਪਯੋਗਤਾਵਾਂ

css-varਬੂਲੀਅਨ ਵਿਕਲਪ ਨੂੰ ਸੈੱਟ ਕਰੋ ਅਤੇ API ਆਮ ਨਿਯਮਾਂ trueਦੀ ਬਜਾਏ ਦਿੱਤੇ ਚੋਣਕਾਰ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਤਿਆਰ ਕਰੇਗਾ । ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ 'ਤੇ property: valueਗੌਰ ਕਰੋ :.text-opacity-*

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

ਆਉਟਪੁੱਟ:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ

ਇੱਕ Sass ਨਕਸ਼ਾ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ local-varsਜੋ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੇ ਨਿਯਮਾਂ ਦੇ ਅੰਦਰ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਤਿਆਰ ਕਰੇਗਾ। ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਤਿਆਰ ਕੀਤੇ CSS ਨਿਯਮਾਂ ਵਿੱਚ ਉਹਨਾਂ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਵਰਤਣ ਲਈ ਵਾਧੂ ਕੰਮ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਸਾਡੀਆਂ .bg-*ਉਪਯੋਗਤਾਵਾਂ 'ਤੇ ਗੌਰ ਕਰੋ:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

ਆਉਟਪੁੱਟ:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

ਰਾਜ

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; }
}

ਛਾਪੋ

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: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ਉਪਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰੋ

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