Utility API
API ຜົນປະໂຫຍດແມ່ນເຄື່ອງມືທີ່ອີງໃສ່ Sass ເພື່ອສ້າງຫ້ອງຮຽນຜົນປະໂຫຍດ.
ຜົນປະໂຫຍດ Bootstrap ແມ່ນຖືກສ້າງຂຶ້ນດ້ວຍ API ຜົນປະໂຫຍດຂອງພວກເຮົາແລະສາມາດຖືກນໍາໃຊ້ເພື່ອດັດແປງຫຼືຂະຫຍາຍຊຸດຊັ້ນຮຽນທີ່ເປັນປະໂຫຍດຂອງພວກເຮົາຜ່ານ Sass. API ຜົນປະໂຫຍດຂອງພວກເຮົາແມ່ນອີງໃສ່ຊຸດຂອງແຜນທີ່ Sass ແລະຫນ້າທີ່ສໍາລັບການສ້າງຄອບຄົວຂອງຫ້ອງຮຽນທີ່ມີທາງເລືອກຕ່າງໆ. ຖ້າທ່ານບໍ່ຄຸ້ນເຄີຍກັບແຜນທີ່ Sass, ກະລຸນາອ່ານຢູ່ໃນ ເອກະສານ Sass ຢ່າງເປັນທາງການ ເພື່ອເລີ່ມຕົ້ນ.
ແຜນ $utilities
ທີ່ປະກອບດ້ວຍສິ່ງອໍານວຍຄວາມສະດວກທັງໝົດຂອງພວກເຮົາ ແລະຕໍ່ມາຈະຖືກລວມເຂົ້າກັບ $utilities
ແຜນທີ່ແບບກຳນົດເອງຂອງເຈົ້າ, ຖ້າມີ. ແຜນທີ່ອຸປະກອນປະກອບດ້ວຍບັນຊີລາຍຊື່ທີ່ສໍາຄັນຂອງກຸ່ມຜົນປະໂຫຍດທີ່ຍອມຮັບທາງເລືອກດັ່ງຕໍ່ໄປນີ້:
ທາງເລືອກ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
property |
ຕ້ອງການ | – | ຊື່ຂອງຊັບສິນ, ນີ້ສາມາດເປັນ string ຫຼື array ຂອງ strings (ຕົວຢ່າງ, paddings ອອກຕາມລວງນອນຫຼືຂອບ). |
values |
ຕ້ອງການ | – | ລາຍຊື່ຂອງຄ່າ, ຫຼືແຜນທີ່ຖ້າທ່ານບໍ່ຕ້ອງການໃຫ້ຊື່ຊັ້ນຮຽນຄືກັນກັບຄ່າ. ຖ້າ null ຖືກໃຊ້ເປັນກະແຈແຜນທີ່, ມັນບໍ່ໄດ້ຖືກລວບລວມ. |
class |
ທາງເລືອກ | null | ຊື່ຂອງຊັ້ນຮຽນທີ່ສ້າງຂຶ້ນ. ຖ້າບໍ່ໄດ້ສະໜອງໃຫ້ ແລະ property ເປັນອາເຣຂອງສະຕຣິງ, class ຈະເປັນຄ່າເລີ່ມຕົ້ນຂອງອົງປະກອບທຳອິດຂອງ property ອາເຣ. |
css-var |
ທາງເລືອກ | false |
Boolean ເພື່ອສ້າງຕົວແປ CSS ແທນກົດລະບຽບ CSS. |
local-vars |
ທາງເລືອກ | null | ແຜນທີ່ຂອງຕົວແປ CSS ທ້ອງຖິ່ນເພື່ອສ້າງນອກເຫນືອຈາກກົດລະບຽບ CSS. |
state |
ທາງເລືອກ | null | ບັນຊີລາຍຊື່ຂອງຕົວແປ pseudo-class (ຕົວຢ່າງ, :hover ຫຼື :focus ) ເພື່ອສ້າງ. |
responsive |
ທາງເລືອກ | false |
Boolean ຊີ້ບອກວ່າຄວນສ້າງຫ້ອງຮຽນຕອບສະໜອງ. |
rfs |
ທາງເລືອກ | false |
Boolean ເພື່ອເປີດໃຊ້ ການປັບ ຂະໜາດຂອງນໍ້າດ້ວຍ RFS . |
print |
ທາງເລືອກ | false |
Boolean ຊີ້ບອກວ່າຕ້ອງສ້າງຫ້ອງຮຽນພິມຫຼືບໍ່. |
rtl |
ທາງເລືອກ | true |
Boolean ຊີ້ບອກວ່າ utility ຄວນຖືກເກັບໄວ້ໃນ 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
ຄວນໃຊ້ໃນຊື່ ແລະກົດລະບຽບຂອງຊັ້ນຮຽນທີ່ສ້າງຂຶ້ນ. ສາມາດເປັນລາຍຊື່ຫຼືແຜນທີ່ (ຕັ້ງຢູ່ໃນສິ່ງອໍານວຍຄວາມສະດວກຫຼືຢູ່ໃນຕົວແປ Sass).
ໃນຖານະເປັນບັນຊີລາຍການ, ເຊັ່ນດຽວກັນກັບຜົນ text-decoration
ປະໂຫຍດ :
values: none underline line-through
ໃນຖານະເປັນແຜນທີ່, ເຊັ່ນດຽວກັນກັບອຸ opacity
ປະກອນການ :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
ໃນຖານະເປັນຕົວແປ Sass ທີ່ກໍານົດບັນຊີລາຍການຫຼືແຜນທີ່, ເຊັ່ນດຽວກັນກັບອຸປະກອນຂອງພວກ 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 variable utilities
ຕັ້ງຄ່າ css-var
ຕົວເລືອກ boolean 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; }
ຕົວແປ CSS ທ້ອງຖິ່ນ
ໃຊ້ 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
ຕົວເລືອກເພື່ອສ້າງຕົວແປ pseudo-class. ຕົວຢ່າງ pseudo-classes ແມ່ນ :hover
ແລະ :focus
. ໃນເວລາທີ່ບັນຊີລາຍຊື່ຂອງລັດໄດ້ຖືກສະຫນອງໃຫ້, ຊື່ຫ້ອງຮຽນແມ່ນສ້າງຂື້ນສໍາລັບ pseudo-class ນັ້ນ. ຕົວຢ່າງ, ເພື່ອປ່ຽນຄວາມໂປ່ງແສງໃນ hover, ເພີ່ມ state: hover
ແລະທ່ານຈະໄດ້ຮັບ .opacity-hover:hover
ໃນ CSS ລວບລວມຂອງທ່ານ.
ຕ້ອງການ pseudo-class ຫຼາຍບໍ? ໃຊ້ລາຍຊື່ລັດທີ່ແຍກອອກຈາກຊ່ອງຫວ່າງ: 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
boolean ເພື່ອສ້າງຜົນປະໂຫຍດທີ່ຕອບສະຫນອງ (ເຊັ່ນ, .opacity-md-25
) ໃນທົ່ວ breakpoints ທັງຫມົດ .
$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
ເພື່ອຮັບປະກັນວ່າພວກເຂົາ override ອົງປະກອບແລະຫ້ອງຮຽນດັດແກ້ຕາມຈຸດປະສົງ. ທ່ານສາມາດສະຫຼັບການຕັ້ງຄ່ານີ້ທົ່ວໂລກດ້ວຍ $enable-important-utilities
ຕົວແປ (ຄ່າເລີ່ມຕົ້ນເປັນ true
).
ການນໍາໃຊ້ API
ໃນປັດຈຸບັນທີ່ທ່ານຄຸ້ນເຄີຍກັບວິທີການຂອງ utilities API ເຮັດວຽກ, ຮຽນຮູ້ວິທີທີ່ຈະເພີ່ມຫ້ອງຮຽນ custom ຂອງທ່ານເອງແລະປັບປຸງ utilities ເລີ່ມຕົ້ນຂອງພວກເຮົາ.
ລົບລ້າງອຸປະກອນ
ລົບລ້າງສິ່ງອໍານວຍຄວາມສະດວກທີ່ມີຢູ່ໂດຍໃຊ້ລະຫັດດຽວກັນ. ຕົວຢ່າງ, ຖ້າທ່ານຕ້ອງການຫ້ອງຮຽນຜົນປະໂຫຍດ overflow ເພີ່ມເຕີມ, ທ່ານສາມາດເຮັດສິ່ງນີ້:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ເພີ່ມອຸປະກອນ
ສາມາດເພີ່ມອຸປະກອນໃຫມ່ໃນ $utilities
ແຜນທີ່ເລີ່ມຕົ້ນທີ່ມີ map-merge
. ໃຫ້ແນ່ໃຈວ່າໄຟລ໌ Sass ທີ່ຕ້ອງການຂອງພວກເຮົາແລະ _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
ສໍາລັບແຕ່ລະ breakpoint. 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, ຫຼືເຄີຍໃຊ້ກັບສົນທິສັນຍາການຕັ້ງຊື່ອື່ນບໍ? ຜົນປະໂຫຍດ API ສາມາດຖືກນໍາໃຊ້ເພື່ອ override ຜົນ class
ຂອງຜົນປະໂຫຍດທີ່ໃຫ້ - ສໍາລັບການຍົກຕົວຢ່າງ, ການປ່ຽນຊື່ .ms-*
utilities ເປັນ oldish .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, ຂໍຂອບໃຈກັບ ຄໍາສັ່ງຄວບຄຸມ RTLCSSremove
.