API a wɔde di dwuma
Utility API no yɛ Sass-gyina adwinnade a wɔde yɛ utility adesua ahorow.
Bootstrap utilities no wɔde yɛn utility API na ɛyɛ na wobetumi de adi dwuma de asesa anaa atrɛw yɛn default set of utility classes no mu denam Sass so. Yɛn utility API no gyina Sass maps ne dwumadie ahodoɔ a wɔde yɛ mmusua a ɛwɔ adesua ahodoɔ a ɛwɔ akwan ahodoɔ so. Sɛ wo nnim Sass maps a, kenkan kɔ soro wɔ official Sass docs no so na woahyɛ aseɛ.
Map no $utilities
kura yɛn utilities nyinaa na akyiri yi wɔde ka wo custom $utilities
map no ho, sɛ ɛwɔ hɔ a. Utility map no kura keyed list a utility akuo ahodoɔ a ɛgye akwan a ɛdidi soɔ yi tom:
Ɔpɛ | Korɔ | Default bo a ɛsom | Nkyerɛmu |
---|---|---|---|
property |
Ɛhia | – . | Agyapadeɛ no din, yei betumi ayɛ ahama anaa nhama a wɔahyehyɛ (sɛ nhwɛsoɔ no, horizontal paddings anaa margins). |
values |
Ɛhia | – . | Kyerɛw botae ahorow, anaa asase mfonini sɛ wompɛ sɛ adesuakuw no din ne botae no bɛyɛ pɛ a. Sɛ null wɔde di dwuma sɛ map key a, wɔanboaboa ano. |
class |
Ɛnyɛ ɔhyɛ | ohunu | Edin a wɔde frɛ adesuakuw a wɔayɛ no. Sɛ wɔamfa amma na property ɛyɛ nhama a wɔahyehyɛ a, class ɛbɛ default akɔ element a edi kan wɔ property nhyehyɛe no mu. |
css-var |
Ɛnyɛ ɔhyɛ | false |
Boolean a ɛbɛma woanya CSS nsakrae ahorow sen sɛ ɛbɛyɛ CSS mmara. |
local-vars |
Ɛnyɛ ɔhyɛ | ohunu | Map a ɛkyerɛ mpɔtam hɔ CSS nsakrae ahorow a wɔde bɛyɛ de aka CSS mmara no ho. |
state |
Ɛnyɛ ɔhyɛ | ohunu | List of pseudo-class variants (sɛ nhwɛso no, :hover anaa :focus ) a wɔde bɛma. |
responsive |
Ɛnyɛ ɔhyɛ | false |
Boolean a ɛkyerɛ sɛ ɛsɛ sɛ wɔyɛ adesua ahorow a ɛyɛ mmuae anaa. |
rfs |
Ɛnyɛ ɔhyɛ | false |
Boolean a ɛbɛma nsuo rescaling atumi de RFS ayɛ adwuma . |
print |
Ɛnyɛ ɔhyɛ | false |
Boolean a ɛkyerɛ sɛ ɛho hia sɛ wɔyɛ print class ahorow anaa. |
rtl |
Ɛnyɛ ɔhyɛ | true |
Boolean a ɛkyerɛ sɛ ɛsɛ sɛ wɔde utility sie wɔ RTL mu anaa. |
API kyerɛkyerɛɛ mu
Wɔde utility variables nyinaa aka $utilities
variable no ho wɔ yɛn _utilities.scss
stylesheet no mu. utilities kuw biara hwɛ biribi te sɛ eyi:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Nea ɛde nea edidi so yi ba:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Agyapadeɛ
Ɛsɛ sɛ wɔde safoa a wɔhwehwɛ property
no si hɔ ma mfaso biara, na ɛsɛ sɛ ɛwɔ CSS agyapade a ɛfata. Saa agyapade yi na wɔde di dwuma wɔ generated utility no mmara nhyehyɛe no mu. Sɛ woyi class
safoa no fi mu a, ɛsan nso yɛ default class din. Susuw text-decoration
mfaso a ɛwɔ so no ho:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Nea efi mu ba:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Nneɛma a Ɛsom Bo
Fa values
safoa no kyerɛ botae ahorow a property
ɛsɛ sɛ wɔde di dwuma ma nea wɔakyerɛ no wɔ adesuakuw din ne mmara a wɔayɛ no mu. Ebetumi ayɛ list anaa map (a wɔde asi hɔ wɔ utilities no mu anaasɛ wɔ Sass variable mu).
Sɛ́ list no, te sɛ nea ɛfa text-decoration
utilities ho :
values: none underline line-through
Sɛ́ asase mfonini no, te sɛ nea ɛfa opacity
utilities ho no :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Sɛ́ Sass variable a ɛde list anaa map no si hɔ, sɛnea ɛte wɔ yɛn position
utilities no mu no :
values: $position-values
Klaase
Fa class
option no sesa class prefix a wɔde di dwuma wɔ CSS a wɔaboaboa ano no mu. Sɛ nhwɛso no, sɛ wopɛ sɛ wosakra fi .opacity-*
kɔ .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Nea efi mu ba:
.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 nsakraeɛ a wɔde di dwuma
Set css-var
boolean option no to true
na API no bɛma local CSS variables ama selector a wɔde ama no sen sɛ ɛbɛyɛ mmara a wɔtaa de property: value
di dwuma no. Susuw nneɛma a yɛde .text-opacity-*
di dwuma no ho hwɛ:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Nea efi mu ba:
.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; }
Mpɔtam hɔ CSS nsakrae ahorow
Fa local-vars
nhyehyeɛ no kyerɛ Sass map a ɛbɛma mpɔtam hɔ CSS nsakraeɛ aba wɔ utility class no mmara nhyehyɛeɛ no mu. Yɛsrɛ wo hyɛ no nsow sɛ ebia ɛbɛhwehwɛ adwuma foforo de adi saa mpɔtam hɔ CSS nsakrae ahorow no wɔ CSS mmara a wɔayɛ no mu. Sɛ nhwɛso no, susuw yɛn .bg-*
utilities ho:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Nea efi mu ba:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Aman ahorow
Fa state
option no yɛ pseudo-class nsakrae ahorow. Nhwɛso a ɛyɛ pseudo-classes ne :hover
ne :focus
. Sɛ wɔde tebea ahorow a wɔahyehyɛ ma a, wɔyɛ adesuakuw din ahorow ma saa pseudo-class no. Sɛ nhwɛso no, sɛ wopɛ sɛ wosakra opacity wɔ hover so a, fa ka ho state: hover
na wubenya .opacity-hover:hover
wo CSS a woaboaboa ano no mu.
Wohia pseudo-classes pii? Fa tebea horow a wɔahyehyɛ a wɔde ahunmu atew mu di dwuma: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Nea efi mu ba:
.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; }
Mmuae a wɔde ma
Fa responsive
boolean no ka ho na woanya mmuaeɛ utilities (sɛ nhwɛsoɔ, .opacity-md-25
) wɔ breakpoints nyinaa so .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Nea efi mu ba:
.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; }
}
Sɛ woma print
option no yɛ adwuma a, ɛbɛma utility classes nso aba ama print, a wɔde di dwuma wɔ @media print { ... }
media query no mu nkutoo.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Nea efi mu ba:
.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; }
}
Nea ɛho hia
utilities a API no ayɛ nyinaa ka ho !important
sɛ wɔbɛhwɛ sɛ wɔbɛbu components ne modifier classes so sɛdeɛ wɔahyɛ da ayɛ no. Wubetumi de $enable-important-utilities
nsakrae (defaults to true
).
API no a wode bedi dwuma
Seesei a woanim sɛnea utilities API no yɛ adwuma no, sua sɛnea wode w’ankasa custom classes bɛka ho na woasesa yɛn default utilities no.
Twe nneɛma a wɔde di dwuma no so
Fa safoa koro no ara a wode bedi dwuma no tow utilities a ɛwɔ hɔ dedaw no so. Sɛ nhwɛso no, sɛ wopɛ responsive overflow utility classes foforo a, wubetumi ayɛ eyi:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Fa nneɛma a wɔde di dwuma ka ho
Wobetumi de utilities foforo aka default $utilities
map no ho denam map-merge
. Hwɛ sɛ yɛn Sass fael a yɛhwehwɛ no na _utilities.scss
wɔde aba kan, afei fa di dwuma map-merge
de fa wo utilities foforo no ka ho. Sɛ nhwɛso no, sɛnea wode responsive cursor
utility a ɛwɔ values abiɛsa bɛka ho ni.
@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,
)
)
);
Sesa nneɛma a wɔde di dwuma
Sesa utilities a ɛwɔ hɔ dedaw wɔ default $utilities
map no mu ne map-get
ne map-merge
dwumadi ahorow. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛde boɔ foforɔ bi rebɛka width
utilities no ho. Fi ase de mfiase map-merge
na afei kyerɛ utility a wopɛ sɛ wosakra no. Efi hɔ, fa nested "width"
map no ne map-get
na woanya na woasesa utility no options ne values.
@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%),
),
),
),
)
);
Ma mmuae a wɔde ma no nyɛ adwuma
Wubetumi ama mmuae adesua ahorow no ayɛ adwuma ama utilities ahorow a ɛwɔ hɔ dedaw a mprempren ɛnyɛ mmuae wɔ default so. Sɛ nhwɛso no, sɛnea ɛbɛyɛ a border
adesua ahorow no bɛyɛ nea ɛfata:
@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 ),
),
)
);
Afei eyi bɛma mmuae nsakrae ahorow aba .border
ne .border-0
nea ɛfa breakpoint biara ho. Wo CSS a woayɛ no bɛyɛ sɛ eyi:
.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 { ... }
}
Sesa utilities din
V4 utilities a ɛyera, anaasɛ woasua din foforo nhyiam? Wobetumi de utilities API no adi dwuma de abɔ nea efi class
utility bi a wɔde ama mu aba no so—sɛ nhwɛso no, sɛ wɔbɛsesa .ms-*
utilities din ayɛ no dedaw .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 ),
),
)
);
Yi nneɛma a wɔde di dwuma no fi hɔ
Yi default utilities no mu biara denam kuw safoa no a wode besi hɔ sɛ null
. Sɛ nhwɛso no, sɛ wopɛ sɛ woyi yɛn width
utilities nyinaa fi hɔ a, yɛ a $utilities
map-merge
na fa ka ho "width": null
.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Yi utility no fi hɔ wɔ RTL mu
Edge cases binom ma RTL styling yɛ den , te sɛ line breaks wɔ Arabic kasa mu. Enti wobetumi ato utilities afi RTL output no mu denam rtl
option no a wode besi hɔ sɛ false
: .
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Nea efi mu ba:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Eyi nkyerɛ biribiara wɔ RTL mu, esiane RTLCSS remove
control directive nti .