ಯುಟಿಲಿಟಿ API

ಯುಟಿಲಿಟಿ ಎಪಿಐ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸಾಸ್-ಆಧಾರಿತ ಸಾಧನವಾಗಿದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಯುಟಿಲಿಟಿ API ನೊಂದಿಗೆ ರಚಿಸಲಾಗಿದೆ ಮತ್ತು ಸಾಸ್ ಮೂಲಕ ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಯುಟಿಲಿಟಿ ವರ್ಗಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ಅಥವಾ ವಿಸ್ತರಿಸಲು ಬಳಸಬಹುದು. ನಮ್ಮ ಯುಟಿಲಿಟಿ API ವಿವಿಧ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ವರ್ಗಗಳ ಕುಟುಂಬಗಳನ್ನು ರಚಿಸಲು ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ಕಾರ್ಯಗಳ ಸರಣಿಯನ್ನು ಆಧರಿಸಿದೆ. ನಿಮಗೆ ಸಾಸ್ ನಕ್ಷೆಗಳ ಪರಿಚಯವಿಲ್ಲದಿದ್ದರೆ, ಪ್ರಾರಂಭಿಸಲು ಅಧಿಕೃತ ಸಾಸ್ ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿ.

ನಕ್ಷೆಯು ನಮ್ಮ ಎಲ್ಲಾ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ ಮತ್ತು ನಂತರದಲ್ಲಿ ನಿಮ್ಮ ಕಸ್ಟಮ್ ನಕ್ಷೆಯೊಂದಿಗೆ $utilitiesವಿಲೀನಗೊಳ್ಳುತ್ತದೆ . $utilitiesಉಪಯುಕ್ತತೆಯ ನಕ್ಷೆಯು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುವ ಉಪಯುಕ್ತತೆಯ ಗುಂಪುಗಳ ಪ್ರಮುಖ ಪಟ್ಟಿಯನ್ನು ಒಳಗೊಂಡಿದೆ:

ಆಯ್ಕೆ	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ	ವಿವರಣೆ
`property`	ಅಗತ್ಯವಿದೆ	–	ಆಸ್ತಿಯ ಹೆಸರು, ಇದು ಸ್ಟ್ರಿಂಗ್ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಒಂದು ಶ್ರೇಣಿಯಾಗಿರಬಹುದು (ಉದಾ, ಅಡ್ಡಲಾಗಿರುವ ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಅಥವಾ ಅಂಚುಗಳು).
`values`	ಅಗತ್ಯವಿದೆ	–	ಮೌಲ್ಯಗಳ ಪಟ್ಟಿ, ಅಥವಾ ವರ್ಗದ ಹೆಸರು ಮೌಲ್ಯದಂತೆಯೇ ಇರಬೇಕೆಂದು ನೀವು ಬಯಸದಿದ್ದರೆ ನಕ್ಷೆ. `null`ನಕ್ಷೆ ಕೀಲಿಯಾಗಿ ಬಳಸಿದರೆ , `class`ವರ್ಗದ ಹೆಸರಿಗೆ ಪೂರ್ವಭಾವಿಯಾಗಿಲ್ಲ.
`class`	ಐಚ್ಛಿಕ	ಶೂನ್ಯ	ರಚಿಸಿದ ವರ್ಗದ ಹೆಸರು. ಒದಗಿಸದಿದ್ದಲ್ಲಿ ಮತ್ತು `property`ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಒಂದು ಶ್ರೇಣಿಯಾಗಿದ್ದರೆ, ರಚನೆಯ `class`ಮೊದಲ ಅಂಶಕ್ಕೆ ಡಿಫಾಲ್ಟ್ ಆಗುತ್ತದೆ `property`. ಒದಗಿಸದಿದ್ದರೆ ಮತ್ತು `property`ಸ್ಟ್ರಿಂಗ್ ಆಗಿದ್ದರೆ, `values`ಕೀಗಳನ್ನು `class`ಹೆಸರುಗಳಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ.
`css-var`	ಐಚ್ಛಿಕ	`false`	CSS ನಿಯಮಗಳ ಬದಲಿಗೆ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಬೂಲಿಯನ್.
`css-variable-name`	ಐಚ್ಛಿಕ	ಶೂನ್ಯ	ನಿಯಮಾವಳಿಯೊಳಗೆ CSS ವೇರಿಯೇಬಲ್‌ಗಾಗಿ ಕಸ್ಟಮ್ ಅನ್-ಪೂರ್ವಪ್ರತ್ಯಯ ಹೆಸರು.
`local-vars`	ಐಚ್ಛಿಕ	ಶೂನ್ಯ	CSS ನಿಯಮಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಉತ್ಪಾದಿಸಲು ಸ್ಥಳೀಯ CSS ವೇರಿಯಬಲ್‌ಗಳ ನಕ್ಷೆ.
`state`	ಐಚ್ಛಿಕ	ಶೂನ್ಯ	ಸೃಷ್ಟಿಸಲು ಹುಸಿ-ವರ್ಗದ ರೂಪಾಂತರಗಳ ಪಟ್ಟಿ (ಉದಾ, `: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ಪಟ್ಟಿ ಅಥವಾ ನಕ್ಷೆಯಾಗಿರಬಹುದು (ಉಪಯುಕ್ತತೆಗಳಲ್ಲಿ ಅಥವಾ ಸಾಸ್ ವೇರಿಯಬಲ್‌ನಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ).

ಪಟ್ಟಿಯಂತೆ, text-decorationಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ :

values: none underline line-through

ನಕ್ಷೆಯಂತೆ, opacityಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ :

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

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

ಒಂದು ವೇಳೆ , ಪ್ರತಿಯೊಂದು ಕೀಲಿಗಳಿಗೂ class: nullತರಗತಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

ಔಟ್‌ಪುಟ್:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS ವೇರಿಯಬಲ್ ಉಪಯುಕ್ತತೆಗಳು

css-varಬೂಲಿಯನ್ ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು API ಸಾಮಾನ್ಯ ನಿಯಮಗಳ trueಬದಲಿಗೆ ಕೊಟ್ಟಿರುವ ಆಯ್ಕೆಗಾಗಿ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ . ವರ್ಗದ ಹೆಸರಿಗಿಂತ ವಿಭಿನ್ನ CSS ವೇರಿಯಬಲ್ ಹೆಸರನ್ನು ಹೊಂದಿಸಲು property: valueಐಚ್ಛಿಕವನ್ನು ಸೇರಿಸಿ .css-variable-name

ನಮ್ಮ .text-opacity-*ಉಪಯುಕ್ತತೆಗಳನ್ನು ಪರಿಗಣಿಸಿ. ನಾವು css-variable-nameಆಯ್ಕೆಯನ್ನು ಸೇರಿಸಿದರೆ, ನಾವು ಕಸ್ಟಮ್ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಪಡೆಯುತ್ತೇವೆ.

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

ಔಟ್‌ಪುಟ್:

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

ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳು

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. ರಾಜ್ಯಗಳ ಪಟ್ಟಿಯನ್ನು ಒದಗಿಸಿದಾಗ, ಆ ಹುಸಿ-ವರ್ಗಕ್ಕೆ ವರ್ಗನಾಮಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಹೋವರ್‌ನಲ್ಲಿ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಸೇರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ state: hoverನೀವು ಪಡೆಯುತ್ತೀರಿ ..opacity-hover:hover

ಬಹು ಹುಸಿ-ವರ್ಗಗಳು ಬೇಕೇ? ಸ್ಪೇಸ್-ಬೇರ್ಪಡಿಸಿದ ರಾಜ್ಯಗಳ ಪಟ್ಟಿಯನ್ನು ಬಳಸಿ 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ಹೊಸ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಡೀಫಾಲ್ಟ್ ಮ್ಯಾಪ್‌ಗೆ a ನೊಂದಿಗೆ ಸೇರಿಸಬಹುದು map-merge. ನಮಗೆ ಅಗತ್ಯವಿರುವ Sass ಫೈಲ್‌ಗಳನ್ನು ಮತ್ತು _utilities.scssಮೊದಲು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ನಂತರ map-mergeನಿಮ್ಮ ಹೆಚ್ಚುವರಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಲು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, cursorಮೂರು ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ ಉಪಯುಕ್ತತೆಯನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ

$utilitiesಡೀಫಾಲ್ಟ್ ನಕ್ಷೆಯಲ್ಲಿ map-getಮತ್ತು map-mergeಕಾರ್ಯಗಳೊಂದಿಗೆ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ . ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು widthಉಪಯುಕ್ತತೆಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುತ್ತಿದ್ದೇವೆ. ಪ್ರಾರಂಭದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ map-mergeಮತ್ತು ನಂತರ ನೀವು ಯಾವ ಉಪಯುಕ್ತತೆಯನ್ನು ಮಾರ್ಪಡಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ. ಅಲ್ಲಿಂದ, ಉಪಯುಕ್ತತೆಯ ಆಯ್ಕೆಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಮಾರ್ಪಡಿಸಲು ನೆಸ್ಟೆಡ್ "width"ಮ್ಯಾಪ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಿ.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ಸ್ಪಂದಿಸುವಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ

ಡೀಫಾಲ್ಟ್ ಆಗಿ ಪ್ರಸ್ತುತವಾಗಿ ಸ್ಪಂದಿಸದಿರುವ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಉಪಯುಕ್ತತೆಗಳ ಸೆಟ್‌ಗಾಗಿ ನೀವು ಸ್ಪಂದಿಸುವ ತರಗತಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, borderತರಗತಿಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಲು:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ಇದು ಈಗ ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ .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 ಉಪಯುಕ್ತತೆಗಳನ್ನು ಕಾಣೆಯಾಗಿದೆಯೇ ಅಥವಾ ಇನ್ನೊಂದು ಹೆಸರಿಸುವ ಸಂಪ್ರದಾಯವನ್ನು ಬಳಸಲಾಗಿದೆಯೇ? ನೀಡಿರುವ ಉಪಯುಕ್ತತೆಯ ಫಲಿತಾಂಶವನ್ನು ಅತಿಕ್ರಮಿಸಲು ಉಪಯುಕ್ತತೆಗಳ API ಅನ್ನು ಬಳಸಬಹುದು class-ಉದಾಹರಣೆಗೆ, .ms-*ಉಪಯುಕ್ತತೆಗಳನ್ನು ಹಳೆಯದು ಎಂದು ಮರುಹೆಸರಿಸಲು .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ಉಪಯುಕ್ತತೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿ

map-remove()ಸಾಸ್ ಕಾರ್ಯದೊಂದಿಗೆ ಯಾವುದೇ ಡೀಫಾಲ್ಟ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿ .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

map-merge()ನೀವು Sass ಕಾರ್ಯವನ್ನು ಸಹ ಬಳಸಬಹುದು nullಮತ್ತು ಉಪಯುಕ್ತತೆಯನ್ನು ತೆಗೆದುಹಾಕಲು ಗುಂಪು ಕೀಲಿಯನ್ನು ಹೊಂದಿಸಬಹುದು .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

ಸೇರಿಸಿ, ತೆಗೆದುಹಾಕಿ, ಮಾರ್ಪಡಿಸಿ

map-merge()ನೀವು Sass ಕಾರ್ಯದೊಂದಿಗೆ ಏಕಕಾಲದಲ್ಲಿ ಅನೇಕ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸಬಹುದು, ತೆಗೆದುಹಾಕಬಹುದು ಮತ್ತು ಮಾರ್ಪಡಿಸಬಹುದು . ಹಿಂದಿನ ಉದಾಹರಣೆಗಳನ್ನು ಒಂದು ದೊಡ್ಡ ನಕ್ಷೆಯಲ್ಲಿ ನೀವು ಹೇಗೆ ಸಂಯೋಜಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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ನಿಯಂತ್ರಣ ನಿರ್ದೇಶನಕ್ಕೆ ಧನ್ಯವಾದಗಳು .