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
קאָנטראָל דירעקטיוו .