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

Utility 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זאָל זיין געניצט אין די דזשענערייטאַד קלאַס נעמען און כּללים. קענען זיין אַ רשימה אָדער מאַפּע (שטעלן אין די יוטילאַטיז אָדער אין אַ סאַסס בייַטעוודיק).

ווי אַ רשימה, ווי מיט 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; }

CSS וועריאַבאַל יוטילאַטיז

שטעלן די css-varבוליאַן אָפּציע צו trueאון די API וועט דזשענערייט היגע 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; }

לאקאלע קסס וועריאַבאַלז

ניצן די local-varsאָפּציע צו ספּעציפיצירן אַ Sass מאַפּע וואָס וועט דזשענערייט היגע 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

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

אָווועררייד יוטילאַטיז

אָווועררייד יגזיסטינג יוטילאַטיז דורך ניצן די זעלבע שליסל. פֿאַר בייַשפּיל, אויב איר ווילן נאָך אָפּרופיק אָוווערפלאָו נוצן קלאסן, איר קענען טאָן דאָס:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

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

ניו יוטילאַטיז קענען זיין מוסיף צו די פעליקייַט $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קאָנטראָל דירעקטיוו .