API Utilitas
API utilitas minangka alat basis Sass kanggo ngasilake kelas sarana.
Utilitas Bootstrap digawe nganggo API utilitas kita lan bisa digunakake kanggo ngowahi utawa ngluwihi set standar kelas utilitas liwat Sass. API utilitas kita adhedhasar seri peta lan fungsi Sass kanggo ngasilake kulawarga kelas kanthi macem-macem pilihan. Yen sampeyan ora ngerti peta Sass, waca dokumen Sass resmi kanggo miwiti.
Peta $utilities
kasebut ngemot kabeh keperluan kita lan banjur digabung karo $utilities
peta khusus sampeyan, yen ana. Peta sarana ngemot dhaptar klompok utilitas sing dikunci sing nampa pilihan ing ngisor iki:
Pilihan | Jinis | Nilai standar | Katrangan |
---|---|---|---|
property |
dibutuhake | – | Jeneng properti, iki bisa dadi senar utawa array saka strings (contone, paddings horisontal utawa pinggiran). |
values |
dibutuhake | – | Dhaptar nilai, utawa peta yen sampeyan ora pengin jeneng kelas padha karo nilai. Yen null digunakake minangka kunci peta, ora dikompilasi. |
class |
Opsional | null | Jeneng kelas sing digawe. Yen ora kasedhiya lan property Uploaded saka strings, class bakal gawan kanggo unsur pisanan property Uploaded. |
css-var |
Opsional | false |
Boolean kanggo ngasilake variabel CSS tinimbang aturan CSS. |
local-vars |
Opsional | null | Peta variabel CSS lokal kanggo ngasilake saliyane aturan CSS. |
state |
Opsional | null | Dhaptar varian kelas pseudo (contone, :hover utawa :focus ) kanggo ngasilake. |
responsive |
Opsional | false |
Boolean sing nuduhake yen kelas responsif kudu digawe. |
rfs |
Opsional | false |
Boolean kanggo ngaktifake rescaling cairan karo RFS . |
print |
Opsional | false |
Boolean sing nuduhake yen kelas print kudu digawe. |
rtl |
Opsional | true |
Boolean sing nuduhake yen sarana kudu disimpen ing RTL. |
API diterangno
Kabeh variabel utilitas ditambahake menyang $utilities
variabel ing _utilities.scss
stylesheet kita. Saben klompok utilitas katon kaya iki:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kang output ing ngisor iki:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Properti
Tombol sing dibutuhake property
kudu disetel kanggo sarana apa wae, lan kudu ngemot properti CSS sing bener. Properti iki digunakake ing ruleset sarana sing digawe. Nalika class
tombol diilangi, uga dadi jeneng kelas standar. Coba text-decoration
gunakake:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Output:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Nilai
Gunakake values
tombol kanggo nemtokake nilai sing ditemtokake property
kudu digunakake ing jeneng kelas lan aturan sing digawe. Bisa dadi dhaptar utawa peta (diset ing utilitas utawa ing variabel Sass).
Minangka dhaptar, kaya karo text-decoration
utilitas :
values: none underline line-through
Minangka peta, kaya karo opacity
utilitas :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Minangka variabel Sass sing nyetel dhaptar utawa peta, kaya ing position
utilitas kita :
values: $position-values
kelas
Gunakake class
pilihan kanggo ngganti awalan kelas sing digunakake ing CSS kompilasi. Contone, kanggo ngganti saka .opacity-*
menyang .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output:
.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; }
Utilitas variabel CSS
Setel css-var
pilihan boolean true
lan API bakal ngasilake variabel CSS lokal kanggo pamilih sing diwenehake tinimbang property: value
aturan sing biasa. Coba .text-opacity-*
utilitas kita:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Output:
.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; }
Variabel CSS lokal
Gunakake local-vars
pilihan kanggo nemtokake peta Sass sing bakal ngasilake variabel CSS lokal ing aturan kelas sarana. Wigati dimangerteni manawa mbutuhake karya tambahan kanggo nggunakake variabel CSS lokal kasebut ing aturan CSS sing digawe. Contone, nimbang .bg-*
utilitas kita:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Output:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
negara
Gunakake state
pilihan kanggo ngasilake variasi kelas pseudo. Conto kelas pseudo yaiku :hover
lan :focus
. Nalika dhaptar negara diwenehake, jeneng kelas digawe kanggo kelas pseudo kasebut. Contone, kanggo ngganti opacity ing hover, nambah state: hover
lan sampeyan bakal entuk .opacity-hover:hover
CSS kompilasi.
Perlu sawetara pseudo-kelas? Gunakake dhaptar negara sing dipisahake spasi: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output:
.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; }
Responsif
Tambah responsive
boolean kanggo ngasilake utilitas responsif (contone, .opacity-md-25
) ing kabeh breakpoints .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output:
.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; }
}
Ngaktifake print
pilihan uga bakal ngasilake kelas sarana kanggo dicithak, sing mung ditrapake ing @media print { ... }
query media.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output:
.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; }
}
wigati
Kabeh keperluan sing digawe dening API kalebu !important
kanggo mesthekake yen ngganti komponen lan kelas modifier kaya sing dikarepake. Sampeyan bisa ngalih setelan iki sacara global nganggo $enable-important-utilities
variabel (standar kanggo true
).
Nggunakake API
Saiki sampeyan wis ngerti cara kerja API utilitas, sinau carane nambah kelas khusus sampeyan dhewe lan ngowahi utilitas standar.
Ngganti utilitas
Ganti utilitas sing ana kanthi nggunakake tombol sing padha. Contone, yen sampeyan pengin kelas utilitas overflow responsif tambahan, sampeyan bisa nindakake iki:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Tambah utilitas
Utilitas anyar bisa ditambahake menyang $utilities
peta standar kanthi map-merge
. Priksa manawa file Sass sing dibutuhake lan _utilities.scss
diimpor dhisik, banjur gunakake map-merge
kanggo nambah keperluan tambahan sampeyan. Contone, iki carane nambah cursor
sarana responsif kanthi telung nilai.
@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,
)
)
);
Ngowahi utilitas
$utilities
Ngowahi keperluan ana ing peta standar karo map-get
lan map-merge
fungsi. Ing conto ing ngisor iki, kita nambahake nilai tambahan kanggo width
utilitas. Miwiti karo dhisikan map-merge
banjur nemtokake sarana sing pengin diowahi. "width"
Saka ing kono, jupuk peta nested map-get
kanggo ngakses lan ngowahi pilihan lan nilai sarana.
@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%),
),
),
),
)
);
Aktifake responsif
Sampeyan bisa ngaktifake kelas responsif kanggo pesawat ana saka keperluan sing saiki ora responsif minangka standar. Contone, kanggo nggawe border
kelas responsif:
@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 ),
),
)
);
Iki saiki bakal ngasilake variasi responsif .border
lan .border-0
kanggo saben breakpoint. CSS sing digawe bakal katon kaya iki:
.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 { ... }
}
Ganti jeneng utilitas
Ilang keperluan v4, utawa digunakake kanggo konvènsi jeneng liyane? API utilitas bisa digunakake kanggo ngganti asil class
saka utilitas sing diwenehake-contone, kanggo ngganti jeneng .ms-*
utilitas dadi lawas .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 ),
),
)
);
Mbusak keperluan
Mbusak utilitas standar kanthi nyetel tombol grup menyang null
. Contone, kanggo mbusak kabeh width
keperluan kita, nggawe $utilities
map-merge
lan nambah "width": null
ing.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Mbusak sarana ing RTL
Sawetara kasus pinggir nggawe gaya RTL angel , kayata jeda baris ing basa Arab. Dadi utilitas bisa dicopot saka output RTL kanthi nyetel rtl
pilihan kanggo false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Output:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Iki ora ngasilake apa-apa ing RTL, amarga arahan kontrol RTLCSSremove
.