האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

Utility 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

איצט אַז איר זענט באַקאַנט מיט ווי די Utilities API אַרבעט, לערנען ווי צו לייגן דיין אייגענע מנהג קלאסן און מאָדיפיצירן אונדזער פעליקייַט יוטילאַטיז.

לייג יוטילאַטיז

ניו יוטילאַטיז קענען זיין מוסיף צו די פעליקייַט $utilitiesמאַפּע מיט אַ map-merge. מאַכן זיכער אַז אונדזער פארלאנגט סאַס טעקעס און _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פון אַ געגעבן נוצן - פֿאַר בייַשפּיל, צו רענאַמע .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קאָנטראָל דירעקטיוו .