ಯುಟಿಲಿಟಿ API

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

ಈ ಪುಟದಲ್ಲಿ

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

ನಕ್ಷೆಯು ನಮ್ಮ ಎಲ್ಲಾ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ ಮತ್ತು ನಂತರದಲ್ಲಿ ನಿಮ್ಮ ಕಸ್ಟಮ್ ನಕ್ಷೆಯೊಂದಿಗೆ $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. ರಾಜ್ಯಗಳ ಪಟ್ಟಿಯನ್ನು ಒದಗಿಸಿದಾಗ, ಆ ಹುಸಿ-ವರ್ಗಕ್ಕೆ ವರ್ಗನಾಮಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಹೋವರ್‌ನಲ್ಲಿ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಸೇರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ 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; }
}

ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬದಲಾಯಿಸುವುದು

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

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