ການເຄື່ອນຍ້າຍໄປ v5
ຕິດຕາມແລະທົບທວນການປ່ຽນແປງຂອງໄຟລ໌ Bootstrap, ເອກະສານ, ແລະອົງປະກອບຕ່າງໆເພື່ອຊ່ວຍໃຫ້ທ່ານຍ້າຍຈາກ v4 ໄປ v5.
ການເພິ່ງພາອາໄສ
- ຫຼຸດລົງ jQuery.
- ອັບເກຣດຈາກ Popper v1.x ເປັນ Popper v2.x.
- ແທນທີ່ Libsass ດ້ວຍ Dart Sass ໃນຖານະທີ່ນັກສັງລວມ Sass ຂອງພວກເຮົາໄດ້ມອບໃຫ້ Libsass ຖືກຍົກເລີກ.
- ຍ້າຍຈາກ Jekyll ໄປ Hugo ເພື່ອສ້າງເອກະສານຂອງພວກເຮົາ
ຮອງຮັບຕົວທ່ອງເວັບ
- ຫຼຸດ Internet Explorer 10 ແລະ 11
- ຫຼຸດ Microsoft Edge < 16 (Legacy Edge)
- ປ່ອຍ Firefox <60
- ຖິ້ມ Safari < 12
- ວາງ iOS Safari < 12
- ລຸດ Chrome < 60
ການປ່ຽນແປງເອກະສານ
- ອອກແບບໜ້າຫຼັກຄືນໃໝ່, ແຜນຜັງເອກະສານ ແລະສ່ວນທ້າຍ.
- ເພີ່ມ ຄູ່ມື Parcel ໃຫມ່ .
- ເພີ່ມ ພາກສ່ວນປັບແຕ່ງໃໝ່ , ແທນທີ່ ໜ້າຫົວຂໍ້ຂອງ v4 , ດ້ວຍລາຍລະອຽດໃໝ່ກ່ຽວກັບ Sass, ຕົວເລືອກການຕັ້ງຄ່າທົ່ວໂລກ, ຮູບແບບສີສັນ, ຕົວແປ CSS ແລະອື່ນໆອີກ.
- ຈັດລະ ບຽບເອກະສານແບບຟອມທັງຫມົດເຂົ້າໄປໃນ ພາກສ່ວນແບບຟອມໃຫມ່ , ແຍກເນື້ອຫາອອກເປັນຫນ້າທີ່ສຸມໃສ່ຫຼາຍ.
- ເຊັ່ນດຽວກັນ, ປັບປຸງ ພາກສ່ວນໂຄງຮ່າງ , ເພື່ອໃຫ້ເນື້ອໃນຂອງຕາຂ່າຍໄຟຟ້າຈະແຈ້ງຂຶ້ນ.
- ປ່ຽນຊື່ໜ້າອົງປະກອບ “Navs” ເປັນ “Navs & Tabs”.
- ປ່ຽນຊື່ໜ້າ “ເຊັກ” ເປັນ “ເຊັກ ແລະວິທະຍຸ”.
- ອອກແບບແຖບນຳທາງຄືນໃໝ່ ແລະໄດ້ເພີ່ມ subnav ໃໝ່ເພື່ອເຮັດໃຫ້ມັນງ່າຍຂຶ້ນໃນການເຂົ້າຫາເວັບໄຊ ແລະສະບັບເອກະສານຂອງພວກເຮົາ.
- ເພີ່ມທາງລັດແປ້ນພິມໃໝ່ສຳລັບຊ່ອງຊອກຫາ: Ctrl + /.
ຊາສ
-
ພວກເຮົາໄດ້ຍົກເລີກການຮວມແຜນທີ່ Sass ເລີ່ມຕົ້ນເພື່ອເຮັດໃຫ້ມັນງ່າຍຕໍ່ການລຶບຄ່າທີ່ຊ້ຳຊ້ອນ. ຈື່ໄວ້ວ່າຕອນນີ້ເຈົ້າຕ້ອງກຳນົດຄ່າທັງໝົດໃນແຜນທີ່ Sass ເຊັ່ນ
$theme-colors
. ກວດເບິ່ງວິທີການຈັດການກັບ ແຜນທີ່ Sass . -
ແຕກການ ປ່ຽນຊື່
color-yiq()
ຟັງຊັນ ແລະຕົວແປທີ່ກ່ຽວຂ້ອງcolor-contrast()
ເປັນມັນບໍ່ກ່ຽວຂ້ອງກັບ YIQ colorspace ອີກຕໍ່ໄປ. ເບິ່ງ #30168.$yiq-contrasted-threshold
ຖືກປ່ຽນຊື່ເປັນ$min-contrast-ratio
.$yiq-text-dark
ແລະ$yiq-text-light
ຖືກປ່ຽນຊື່ຕາມລໍາດັບເປັນ$color-contrast-dark
ແລະ$color-contrast-light
.
-
ແຕກຕົວກໍານົດການ mixins query media ມີການປ່ຽນແປງສໍາລັບວິທີການທີ່ມີເຫດຜົນຫຼາຍ.
media-breakpoint-down()
ໃຊ້ breakpoint ຕົວຂອງມັນເອງແທນທີ່ຈະເປັນ breakpoint ຕໍ່ໄປ (ເຊັ່ນ:media-breakpoint-down(lg)
ແທນທີ່ຈະເປັນmedia-breakpoint-down(md)
ເປົ້າຫມາຍ viewports ນ້ອຍກວ່າlg
).- ເຊັ່ນດຽວກັນ, ຕົວກໍານົດການທີສອງໃນ
media-breakpoint-between()
ຍັງໃຊ້ breakpoint ຕົວຂອງມັນເອງແທນທີ່ຈະເປັນ breakpoint ຕໍ່ໄປ (ຕົວຢ່າງ,media-between(sm, lg)
ແທນທີ່ຈະເປັນmedia-breakpoint-between(sm, md)
ເປົ້າຫມາຍ viewports ລະຫວ່າງsm
ແລະlg
).
-
ແຕກລຶບຮູບແບບການພິມ ແລະ
$enable-print-styles
ຕົວແປອອກແລ້ວ. ຫ້ອງຮຽນສະແດງການພິມແມ່ນຍັງປະມານ. ເບິ່ງ #28339 . -
ແຕກຫຼຸດລົງ
color()
,theme-color()
, ແລະgray()
ຫນ້າທີ່ຢູ່ໃນເງື່ອນໄຂຂອງຕົວແປ. ເບິ່ງ #29083 . -
ແຕກ
theme-color-level()
ຟັງຊັນ ປ່ຽນຊື່ ເປັນcolor-level()
ແລະຕອນນີ້ຍອມຮັບທຸກສີທີ່ທ່ານຕ້ອງການແທນທີ່ຈະເປັນ$theme-color
ສີເທົ່ານັ້ນ. ເບິ່ງ #29083 ລະວັງ:color-level()
ຕໍ່ມາໄດ້ຖືກຫຼຸດລົງໃນv5.0.0-alpha3
. -
ແຕກປ່ຽນຊື່
$enable-prefers-reduced-motion-media-query
ແລະ$enable-pointer-cursor-for-buttons
ໄປຫາ$enable-reduced-motion
ແລະ$enable-button-pointers
ສໍາລັບ brevity. -
ແຕກເອົາ
bg-gradient-variant()
mixin ອອກ. ໃຊ້.bg-gradient
ຊັ້ນຮຽນເພື່ອເພີ່ມ gradients ໃສ່ອົງປະກອບແທນທີ່ຈະເປັນ.bg-gradient-*
ຊັ້ນຮຽນທີ່ສ້າງຂຶ້ນ. -
ແຕກ ເອົາ mixins ທີ່ປະຕິເສດໄປກ່ອນໜ້ານີ້ອອກແລ້ວ:
hover
,hover-focus
,plain-hover-focus
, ແລະhover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(ຍັງໄດ້ຫຼຸດຊັ້ນປະໂຫຍດທີ່ກ່ຽວຂ້ອງ,.text-hide
)visibility()
form-control-focus()
-
ແຕກ
scale-color()
ຟັງຊັນ ປ່ຽນຊື່shift-color()
ເພື່ອຫຼີກເວັ້ນການຂັດກັນກັບຟັງຊັນການປັບສີຂອງ Sass. -
box-shadow
mixins ໃນປັດຈຸບັນອະນຸຍາດໃຫ້null
ຄ່າແລະຫຼຸດລົງnone
ຈາກການໂຕ້ຖຽງຫຼາຍ. ເບິ່ງ #30394 . -
ດຽວ ນີ້
border-radius()
mixin ມີຄ່າເລີ່ມຕົ້ນ.
ລະບົບສີ
-
ລະບົບສີທີ່ເຮັດວຽກກັບ
color-level()
ແລະ$theme-color-interval
ຖືກໂຍກຍ້າຍອອກໃນເງື່ອນໄຂຂອງລະບົບສີໃຫມ່. ທັງຫມົດlighten()
ແລະdarken()
ຫນ້າທີ່ໃນ codebase ຂອງພວກເຮົາແມ່ນຖືກທົດແທນໂດຍtint-color()
ແລະshade-color()
. ຟັງຊັນເຫຼົ່ານີ້ຈະປະສົມສີດ້ວຍສີຂາວຫຼືສີດໍາແທນທີ່ຈະປ່ຽນຄວາມສະຫວ່າງຂອງມັນໂດຍຈໍານວນຄົງທີ່. ຈະ ທາshift-color()
ສີ ຫຼື ຮົ່ມສີ ຂຶ້ນກັບວ່າຕົວກຳນົດນ້ຳໜັກຂອງມັນເປັນບວກ ຫຼື ລົບ. ເບິ່ງ #30622 ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ. -
ເພີ່ມ tints ແລະຮົ່ມໃຫມ່ສໍາລັບທຸກສີ, ສະຫນອງເກົ້າສີແຍກຕ່າງຫາກສໍາລັບແຕ່ລະສີພື້ນຖານ, ເປັນຕົວແປ Sass ໃຫມ່.
-
ປັບປຸງຄວາມຄົມຊັດຂອງສີ. ອັດຕາສ່ວນສີທີ່ຂັດຈາກ 3:1 ຫາ 4.5:1 ແລະປັບປຸງສີຟ້າ, ສີຂຽວ, cyan, ແລະສີບົວເພື່ອຮັບປະກັນ WCAG 2.1 AA contrast. ຍັງໄດ້ປ່ຽນສີກົງກັນຂ້າມສີຂອງພວກເຮົາຈາກ
$gray-900
ເປັນ$black
. -
ເພື່ອສະຫນັບສະຫນູນລະບົບສີຂອງພວກເຮົາ, ພວກເຮົາໄດ້ເພີ່ມ custom
tint-color()
ແລະshade-color()
ຫນ້າທີ່ໃຫມ່ເພື່ອປະສົມສີຂອງພວກເຮົາຢ່າງເຫມາະສົມ.
ການປັບປຸງຕາຂ່າຍໄຟຟ້າ
-
ຈຸດຢຸດໃໝ່! ເພີ່ມ
xxl
ຈຸດແບ່ງໃໝ່ສຳລັບ1400px
ແລະຂຶ້ນ. ບໍ່ມີການປ່ຽນແປງຕໍ່ກັບຈຸດຢຸດອື່ນໆທັງໝົດ. -
ປັບປຸງທໍ່ລະບາຍນໍ້າ. Gutters ໃນປັດຈຸບັນຖືກຕັ້ງຢູ່ໃນ rems, ແລະແຄບກວ່າ v4 (
1.5rem
, ຫຼືປະມານ24px
, ລົງຈາກ30px
). ອັນນີ້ເຮັດໃຫ້ລະບົບຕາໜ່າງຂອງລະບົບຕາຂ່າຍຂອງພວກເຮົາສອດຄ່ອງກັນກັບສິ່ງອໍານວຍຄວາມສະດວກໃນພື້ນທີ່ຂອງພວກເຮົາ.- ເພີ່ມຫ້ອງນໍ້າໃໝ່ ( , , ແລະ ) ເພື່ອຄວບຄຸມ ຮ່ອງລະ ບາຍນ້ຳ ແນວນອນ/ແນວຕັ້ງ, ຮ່ອງລະບາຍນ້ຳຕາມລວງນອນ ແລະຮ່ອງລະບາຍນ້ຳແນວຕັ້ງ.
.g-*
.gx-*
.gy-*
- ແຕກປ່ຽນຊື່
.no-gutters
ໃຫ້.g-0
ກົງກັບສິ່ງອໍານວຍຄວາມສະດວກຂອງທໍ່ນໍ້າໃໝ່.
- ເພີ່ມຫ້ອງນໍ້າໃໝ່ ( , , ແລະ ) ເພື່ອຄວບຄຸມ ຮ່ອງລະ ບາຍນ້ຳ ແນວນອນ/ແນວຕັ້ງ, ຮ່ອງລະບາຍນ້ຳຕາມລວງນອນ ແລະຮ່ອງລະບາຍນ້ຳແນວຕັ້ງ.
-
ຖັນບໍ່ໄດ້
position: relative
ນຳໃຊ້ແລ້ວ, ດັ່ງນັ້ນທ່ານອາດຈະຕ້ອງເພີ່ມ.position-relative
ໃສ່ບາງອົງປະກອບເພື່ອຟື້ນຟູພຶດຕິກຳນັ້ນ. -
ແຕກເລີກຮຽນຫຼາຍ
.order-*
ຊັ້ນທີ່ມັກຈະບໍ່ໄດ້ໃຊ້. ດຽວນີ້ພວກເຮົາສະໜອງໃຫ້.order-1
ນອກ.order-5
ກ່ອງເທົ່ານັ້ນ. -
ແຕກຫຼຸດລົງ
.media
ອົງປະກອບຍ້ອນວ່າມັນສາມາດ replicated ໄດ້ຢ່າງງ່າຍດາຍກັບ utilities. ເບິ່ງ #28265 ແລະຫນ້າ flex utilities ສໍາລັບຕົວຢ່າງ . -
ແຕກ
bootstrap-grid.css
ດຽວນີ້ນຳໃຊ້box-sizing: border-box
ກັບຖັນເທົ່ານັ້ນ ແທນທີ່ຈະຕັ້ງຂະໜາດກ່ອງທົ່ວໂລກຄືນໃໝ່. ດ້ວຍວິທີນີ້, ຮູບແບບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາສາມາດຖືກນໍາໃຊ້ໃນສະຖານທີ່ຫຼາຍໂດຍບໍ່ມີການແຊກແຊງ. -
$enable-grid-classes
ຈະບໍ່ປິດການຜະລິດຊັ້ນບັນຈຸຂອງບັນຈຸອີກຕໍ່ໄປ. ເບິ່ງ #29146. -
ອັບເດດ
make-col
mixin ເປັນຄ່າເລີ່ມຕົ້ນເປັນຖັນເທົ່າກັນໂດຍບໍ່ມີຂະຫນາດທີ່ກໍານົດໄວ້.
ເນື້ອໃນ, reboot, ແລະອື່ນໆ
-
ດຽວນີ້ RFS ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ. ຫົວຂໍ້ທີ່ໃຊ້
font-size()
mixin ອັດຕະໂນມັດຈະປັບfont-size
ຂະຫນາດຂອງເຂົາເຈົ້າກັບ viewport ໄດ້. ຄຸນນະສົມບັດນີ້ໃນເມື່ອກ່ອນໄດ້ຮັບການເລືອກເຂົ້າກັບ v4. -
ແຕກປັບປຸງການພິມຕົວພິມຂອງພວກເຮົາເພື່ອທົດແທນ
$display-*
ຕົວແປຂອງພວກເຮົາ ແລະດ້ວຍ$display-font-sizes
ແຜນທີ່ Sass. ນອກຈາກນີ້ຍັງໄດ້ລົບ$display-*-weight
ຕົວແປສ່ວນບຸກຄົນສໍາລັບການດຽວ$display-font-weight
ແລະປັບfont-size
s. -
ເພີ່ມສອງ
.display-*
ຂະຫນາດຫົວຂໍ້ໃຫມ່,.display-5
ແລະ.display-6
. -
ລິ້ງຈະຖືກຂີດກ້ອງໂດຍຄ່າເລີ່ມຕົ້ນ (ບໍ່ພຽງແຕ່ຢູ່ເທິງ hover), ເວັ້ນເສຍແຕ່ວ່າພວກມັນເປັນສ່ວນຫນຶ່ງຂອງອົງປະກອບສະເພາະ.
-
ອອກແບບຕາຕະລາງໃຫມ່ ເພື່ອໂຫຼດຫນ້າຈໍຄືນຮູບແບບຂອງພວກເຂົາແລະສ້າງໃຫມ່ດ້ວຍຕົວແປ CSS ສໍາລັບການຄວບຄຸມການຈັດຮູບແບບ.
-
ແຕກຕາຕະລາງທີ່ຊ້ອນກັນບໍ່ໄດ້ສືບທອດຮູບແບບອີກຕໍ່ໄປ.
-
ແຕກ
.thead-light
ແລະ.thead-dark
ຖືກຫຼຸດລົງໃນຄວາມໂປດປານຂອງ.table-*
ຫ້ອງຮຽນ variant ທີ່ສາມາດນໍາໃຊ້ສໍາລັບອົງປະກອບຕາຕະລາງທັງຫມົດ (thead
,tbody
,tfoot
, ,tr
,th
ແລະtd
). -
ແຕກmixin
table-row-variant()
ຖືກປ່ຽນຊື່ເປັນtable-variant()
ແລະຍອມຮັບພຽງແຕ່ 2 ຕົວກໍານົດການ:$color
(ຊື່ສີ) ແລະ$value
(ລະຫັດສີ). ສີຂອບ ແລະສີສຳນຽງຈະຖືກຄຳນວນໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ຕົວແປຂອງຕາຕະລາງ. -
ແຍກຕົວແປຕາຕະລາງຕາລາງ padding ເຂົ້າໄປໃນ
-y
ແລະ-x
. -
ແຕກເລື່ອນ
.pre-scrollable
ຊັ້ນ. ເບິ່ງ #29135 -
ແຕກ
.text-*
ຜົນປະໂຫຍດບໍ່ໄດ້ເພີ່ມ hover ແລະລັດສຸມໃສ່ການເຊື່ອມຕໍ່ອີກຕໍ່ໄປ..link-*
ຫ້ອງຮຽນຜູ້ຊ່ວຍສາມາດໃຊ້ແທນໄດ້. ເບິ່ງ #29267 -
ແຕກເລື່ອນ
.text-justify
ຊັ້ນ. ເບິ່ງ #29793 -
ຣີເຊັດຄ່າເລີ່ມຕົ້ນຕາມແນວນອນ
padding-left
ແລະ<ul>
ອົງ<ol>
ປະກອບຈາກຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ40px
ເປັນ2rem
. -
ເພີ່ມ
$enable-smooth-scroll
ແລ້ວ, ເຊິ່ງໃຊ້ໄດ້scroll-behavior: smooth
ທົ່ວໂລກ—ຍົກເວັ້ນຜູ້ໃຊ້ທີ່ຮ້ອງຂໍໃຫ້ມີການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຜ່ານprefers-reduced-motion
ການສອບຖາມສື່. ເບິ່ງ #31877
RTL
- ຕົວແປສະເພາະທິດທາງແນວນອນ, ຜົນປະໂຫຍດ, ແລະ mixins ທັງຫມົດໄດ້ຖືກປ່ຽນຊື່ເພື່ອນໍາໃຊ້ຄຸນສົມບັດທີ່ມີເຫດຜົນຄືກັບທີ່ພົບເຫັນຢູ່ໃນ flexbox layouts - ເຊັ່ນ,
start
ແລະend
ແທນທີ່ຈະເປັນleft
ແລະright
.
ແບບຟອມ
-
ເພີ່ມແບບຟອມລອຍຕົວໃໝ່ແລ້ວ! ພວກເຮົາໄດ້ສົ່ງເສີມຕົວຢ່າງປ້າຍແບບເລື່ອນໄປຫາອົງປະກອບແບບຟອມທີ່ຮອງຮັບຢ່າງເຕັມທີ່. ເບິ່ງໜ້າປ້າຍກຳກັບທີ່ເລື່ອນໄດ້ໃໝ່.
-
ແຕກ ລວມອົງປະກອບແບບຟອມພື້ນເມືອງ ແລະແບບກຳນົດເອງ. ກ່ອງໝາຍຕິກ, ວິທະຍຸ, ການເລືອກ ແລະວັດສະດຸປ້ອນອື່ນໆທີ່ມີຫ້ອງຮຽນພື້ນເມືອງ ແລະແບບກຳນົດເອງໃນ v4 ໄດ້ຖືກລວມເຂົ້າກັນແລ້ວ. ໃນປັດຈຸບັນເກືອບທຸກອົງປະກອບແບບຟອມຂອງພວກເຮົາແມ່ນເປັນແບບກໍາຫນົດເອງທັງຫມົດ, ສ່ວນໃຫຍ່ໂດຍບໍ່ຈໍາເປັນຕ້ອງໃຊ້ HTML ແບບກໍານົດເອງ.
.custom-check
ດຽວນີ້.form-check
..custom-check.custom-switch
ດຽວນີ້.form-check.form-switch
..custom-select
ດຽວນີ້.form-select
..custom-file
ແລະ.form-file
ໄດ້ຖືກແທນທີ່ດ້ວຍຮູບແບບທີ່ກໍາຫນົດເອງຢູ່ເທິງສຸດຂອງ.form-control
..custom-range
ດຽວນີ້.form-range
.- ຫຼຸດລົງ native
.form-control-file
ແລະ.form-control-range
.
-
ແຕກຫຼຸດລົງ
.input-group-append
ແລະ.input-group-prepend
. ໃນປັດຈຸບັນທ່ານພຽງແຕ່ສາມາດເພີ່ມປຸ່ມແລະ.input-group-text
ເປັນເດັກນ້ອຍໂດຍກົງຂອງກຸ່ມການປ້ອນຂໍ້ມູນ. -
ລັດສະ ໝີຊາຍແດນທີ່ຂາດຫາຍໄປ ດົນນານ ໃນກຸ່ມປ້ອນຂໍ້ມູນທີ່ມີຂໍ້ບົກພ່ອງໃນການກວດສອບຄວາມ ຖືກຕ້ອງແມ່ນສຸດທ້າຍໄດ້ແກ້ໄຂໂດຍການເພີ່ມ
.has-validation
ຊັ້ນຮຽນເພີ່ມເຕີມໃຫ້ກັບກຸ່ມປ້ອນຂໍ້ມູນດ້ວຍການກວດສອບຄວາມຖືກຕ້ອງ. -
ແຕກ ຫຼຸດຊັ້ນຮຽນຮູບແບບສະເພາະສຳລັບລະບົບຕາໜ່າງຂອງພວກເຮົາ. ໃຊ້ຕາຂ່າຍໄຟຟ້າ ແລະເຄື່ອງໃຊ້ຂອງພວກເຮົາແທນ
.form-group
,.form-row
, ຫຼື.form-inline
. -
ແຕກປ້າຍກຳກັບແບບຟອມຕອນນີ້ຕ້ອງ
.form-label
ການ . -
ແຕກ
.form-text
ບໍ່ໄດ້ຕັ້ງໄວ້ອີກຕໍ່ໄປdisplay
, ໃຫ້ທ່ານສ້າງໃນແຖວຫຼື block ຂໍ້ຄວາມຊ່ວຍເຫຼືອຕາມທີ່ທ່ານຕ້ອງການໂດຍການປ່ຽນແປງອົງປະກອບ HTML ໄດ້. -
ໄອຄອນການກວດສອບບໍ່ໄດ້ໃຊ້ກັບ
<select>
s ກັບmultiple
. -
ໄຟລ໌ Sass ແຫຼ່ງທີ່ຈັດຮຽງໃໝ່ພາຍໃຕ້
scss/forms/
, ລວມທັງຮູບແບບກຸ່ມການປ້ອນຂໍ້ມູນ.
ອົງປະກອບ
- ຄ່າ ລວມ
padding
ສໍາລັບການແຈ້ງເຕືອນ, breadcrumbs, ບັດ, dropdowns, ກຸ່ມລາຍຊື່, modals, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມືທີ່ຈະອີງໃສ່$spacer
ຕົວແປຂອງພວກເຮົາ. ເບິ່ງ #30564 .
ອັກຄີໄພ
- ເພີ່ມ ອົງປະກອບ accordion ໃຫມ່ .
ແຈ້ງເຕືອນ
-
ດຽວນີ້ການແຈ້ງເຕືອນມີ ຕົວຢ່າງທີ່ມີໄອຄອນ .
-
ລຶບຮູບແບບກຳນົດເອງສຳລັບ
<hr>
s ໃນແຕ່ລະການແຈ້ງເຕືອນຕັ້ງແຕ່ພວກມັນໃຊ້ແລ້ວcurrentColor
.
ປ້າຍ
-
ແຕກຫຼຸດ
.badge-*
ຊັ້ນສີທັງໝົດສຳລັບສິ່ງນຳໃຊ້ພື້ນຫຼັງ (ຕົວຢ່າງ: ໃຊ້.bg-primary
ແທນ.badge-primary
). -
ແຕກລຸດລົງ
.badge-pill
- ໃຊ້.rounded-pill
ປະໂຫຍດແທນ. -
ແຕກເອົາ hover ແລະ focus ຮູບແບບຂອງ
<a>
ແລະ<button>
ອົງປະກອບ. -
ເພີ່ມຄ່າເລີ່ມຕົ້ນສຳລັບປ້າຍຈາກ
.25em
/.5em
ຫາ.35em
/.65em
.
ເຂົ້າໜົມປັງ
-
ຫຍໍ້ລັກສະນະເລີ່ມຕົ້ນຂອງ breadcrumbs ໂດຍການເອົາອອກ
padding
,background-color
, ແລະborder-radius
. -
ເພີ່ມຄຸນສົມບັດ CSS custom ໃໝ່
--bs-breadcrumb-divider
ສໍາລັບການປັບແຕ່ງງ່າຍໂດຍບໍ່ຈໍາເປັນຕ້ອງລວບລວມ CSS.
ປຸ່ມ
-
ແຕກ ປຸ່ມສະຫຼັບ , ດ້ວຍກ່ອງໝາຍ ຫຼືວິທະຍຸ, ບໍ່ຈຳເປັນຕ້ອງໃຊ້ JavaScript ອີກຕໍ່ໄປ ແລະ ມີເຄື່ອງໝາຍໃໝ່. ພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງມີອົງປະກອບການຫໍ່ອີກຕໍ່ໄປ, ເພີ່ມ
.btn-check
ໃສ່<input>
, ແລະຈັບຄູ່ມັນກັບ.btn
ຫ້ອງຮຽນໃດຫນຶ່ງໃນ<label>
. ເບິ່ງ #30650 . ເອກະສານສໍາລັບການນີ້ໄດ້ຍ້າຍຈາກຫນ້າປຸ່ມຂອງພວກເຮົາໄປຫາພາກສ່ວນແບບຟອມໃຫມ່. -
ແຕກ ຫຼຸດລົງ
.btn-block
ສໍາລັບສິ່ງອໍານວຍຄວາມສະດວກ. ແທນທີ່ຈະນໍາໃຊ້.btn-block
ກ່ຽວກັບການ.btn
, ຫໍ່ປຸ່ມຂອງທ່ານ.d-grid
ແລະ.gap-*
ຜົນປະໂຫຍດທີ່ຈະຊ່ອງຫວ່າງໃຫ້ເຂົາເຈົ້າຕາມຄວາມຕ້ອງການ. ສະຫຼັບໄປໃຊ້ຫ້ອງຮຽນທີ່ຕອບສະໜອງເພື່ອຄວບຄຸມພວກມັນໄດ້ຫຼາ���ຂຶ້ນ. ອ່ານເອກະສານສໍາລັບບາງຕົວຢ່າງ. -
ອັບເດດ
button-variant()
ແລະbutton-outline-variant()
mixins ຂອງພວກເຮົາເພື່ອຮອງຮັບພາລາມິເຕີເພີ່ມເຕີມ. -
ອັບເດດປຸ່ມເພື່ອຮັບປະກັນຄວາມຄົມຊັດທີ່ເພີ່ມຂຶ້ນໃນການເລື່ອນ ແລະສະຖານະທີ່ເຄື່ອນໄຫວ.
-
ປຸ່ມທີ່ຖືກປິດໃຊ້ງານໃນປັດຈຸບັນມີ
pointer-events: none;
.
ບັດ
-
ແຕກຕົກ
.card-deck
ຢູ່ໃນເງື່ອນໄຂຂອງຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ຫໍ່ບັດຂອງທ່ານໃນຫ້ອງຮຽນຖັນ ແລະເພີ່ມພາ.row-cols-*
ຊະນະຫຼັກເພື່ອສ້າງແຖບບັດຄືນໃໝ່ (ແຕ່ມີການຄວບຄຸມຫຼາຍກວ່າການຈັດຮຽງແບບຕອບສະໜອງ). -
ແຕກຫຼຸດລົງ
.card-columns
ໃນເງື່ອນໄຂຂອງ Masonry. ເບິ່ງ #28922 . -
ແຕກແທນ
.card
ທີ່ accordion ທີ່ມີ ອົງປະກອບ Accordion ໃຫມ່ .
Carousel
-
ເພີ່ມ
.carousel-dark
ຕົວແປ ໃໝ່ ສຳລັບຂໍ້ຄວາມມືດ, ການຄວບຄຸມ ແລະຕົວຊີ້ວັດ (ດີຫຼາຍສຳລັບພື້ນຫຼັງທີ່ອ່ອນກວ່າ). -
ແທນທີ່ໄອຄອນ chevron ສໍາລັບການຄວບຄຸມ carousel ດ້ວຍ SVGs ໃໝ່ຈາກ Bootstrap Icons .
ປຸ່ມປິດ
-
ແຕກປ່ຽນຊື່ ເປັນຊື່ທົ່ວ
.close
ໄປ.btn-close
ໜ້ອຍກວ່າ. -
ປຸ່ມປິດດຽວນີ້ໃຊ້
background-image
(ຝັງ SVG) ແທນທີ່ຈະເປັນ×
HTML, ອະນຸຍາດໃຫ້ປັບແຕ່ງໄດ້ງ່າຍຂຶ້ນໂດຍບໍ່ຈໍາເປັນຕ້ອງແຕະໃສ່ເຄື່ອງໝາຍຂອງທ່ານ. -
ເພີ່ມ
.btn-close-white
ຕົວແປໃໝ່ທີ່ໃຊ້filter: invert(1)
ເພື່ອເປີດໃຊ້ໄອຄອນຕັດຄວາມຄົມຊັດທີ່ສູງກວ່າຕໍ່ກັບພື້ນຫຼັງທີ່ມືດກວ່າ.
ຫຍໍ້ລົງ
- ຖອດສະມໍເລື່ອນອອກສໍາລັບ accordions.
ເລື່ອນລົງ
-
ເພີ່ມ
.dropdown-menu-dark
ຕົວແປໃໝ່ ແລະຕົວແປທີ່ກ່ຽວຂ້ອງສຳລັບການເລື່ອນລົງແບບມືດຕາມຄວາມຕ້ອງການ. -
ເພີ່ມຕົວແປໃຫມ່ສໍາລັບ
$dropdown-padding-x
. -
ເຮັດຊ້ໍາຕົວແບ່ງແບບເລື່ອນລົງເພື່ອການປັບປຸງຄວາມຄົມຊັດ.
-
ແຕກເຫດການທັງໝົດສຳລັບລາຍການແບບເລື່ອນລົງຕອນນີ້ຖືກກະຕຸ້ນຢູ່ໃນປຸ່ມສະຫຼັບແບບເລື່ອນລົງ ແລະຈາກນັ້ນຖືກຟອງຂຶ້ນໄປຫາອົງປະກອບຫຼັກ.
-
ເມນູແບບເລື່ອນລົງຕອນນີ້ມີ
data-bs-popper="static"
ຄຸນສົມບັດທີ່ຕັ້ງໄວ້ເມື່ອການຈັດຕຳແໜ່ງຂອງເລື່ອນລົງແບບຄົງທີ່ ແລະdata-bs-popper="none"
ເມື່ອເລື່ອນລົງຢູ່ໃນແຖບນຳທາງ. ນີ້ໄດ້ຖືກເພີ່ມໂດຍ JavaScript ຂອງພວກເຮົາແລະຊ່ວຍໃຫ້ພວກເຮົານໍາໃຊ້ຮູບແບບຕໍາແຫນ່ງທີ່ກໍາຫນົດເອງໂດຍບໍ່ມີການແຊກແຊງກັບຕໍາແຫນ່ງຂອງ Popper. -
ແຕກທາງເລືອກທີ່ ຫຼຸດລົງ
flip
ສໍາລັບ plugin dropdown ໃນເງື່ອນໄຂຂອງການຕັ້ງຄ່າ Popper ພື້ນເມືອງ. ໃນປັດຈຸບັນທ່ານສາມາດປິດການທໍາງານຂອງ flipping ພຶດຕິກໍາໂດຍການສົ່ງ array ຫວ່າງເປົ່າສໍາລັບfallbackPlacements
ທາງເລືອກໃນ flip modifier. -
ຕອນນີ້ເມນູແບບເລື່ອນລົງສາມາດຄລິກໄດ້ດ້ວຍ
autoClose
ຕົວເລືອກໃໝ່ເພື່ອຈັດການ ພຶດຕິກຳປິດອັດຕະໂນມັດ . ທ່ານສາມາດນໍາໃຊ້ທາງເລືອກນີ້ເພື່ອຮັບເອົາການຄລິກພາຍໃນຫຼືນອກເມນູ dropdown ເພື່ອເຮັດໃຫ້ມັນໂຕ້ຕອບໄດ້. -
dropdowns ໃນປັດຈຸບັນສະຫນັບສະຫນູນ
.dropdown-item
s ຫໍ່ຢູ່ໃນ<li>
s.
ຈູມໂບຕຣອນ
- ແຕກຫຼຸດລົງອົງປະກອບຂອງ jumbotron ຍ້ອນວ່າມັນສາມາດ replicated ກັບ utilities. ເບິ່ງຕົວຢ່າງ Jumbotron ໃຫມ່ຂອງພວກເຮົາສໍາລັບການສາທິດ.
ລາຍຊື່ກຸ່ມ
- ເພີ່ມ
.list-group-numbered
ຕົວ ແກ້ໄຂໃໝ່ ໃສ່ລາຍຊື່ກຸ່ມ.
Navs ແລະແຖບ
- ເພີ່ມ
null
ຕົວແປໃຫມ່ສໍາລັບfont-size
,font-weight
,color
, ແລະ:hover
color
ຫ້ອງ.nav-link
ຮຽນ.
Navbars
- ແຕກດຽວນີ້ Navbars ຕ້ອງການບັນຈຸພາຍໃນ (ເພື່ອເຮັດໃຫ້ຄວາມຕ້ອງການຊ່ອງຫວ່າງແລະ CSS ຕ້ອງການ).
ຜ້າໃບ
- ເພີ່ມ ອົງປະກອບ offcanvas ໃໝ່ .
Pagination
-
ຕອນນີ້ລິ້ງ Pagination ສາມາດປັບແຕ່ງໄດ້
margin-left
ເຊິ່ງເປັນຮູບກົມແບບໄດນາມິກໃນທຸກມຸມເມື່ອແຍກອອກຈາກກັນ. -
ເພີ່ມ
transition
s ກັບການເຊື່ອມຕໍ່ pagination.
Popovers
-
ແຕກປ່ຽນຊື່
.arrow
ເປັນ.popover-arrow
ແມ່ແບບ popover ເລີ່ມຕົ້ນຂອງພວກເຮົາ. -
ປ່ຽນຊື່
whiteList
ທາງເລືອກເປັນallowList
.
ເຄື່ອງປັ່ນປ່ວນ
-
ດຽວນີ້ Spinners ໃຫ້ກຽດ
prefers-reduced-motion: reduce
ໂດຍການຊ້າລົງອະນິເມຊັນ. ເບິ່ງ #31882 . -
ປັບປຸງການຈັດຮຽງຕາມແນວຕັ້ງຂອງ spinner.
ເຂົ້າຈີ່
-
Toasts ໃນປັດຈຸບັນສາມາດຖືກ ຈັດ ໃສ່ໃນ a
.toast-container
ທີ່ມີການຊ່ວຍເຫຼືອຂອງການ ຈັດຕໍາແຫນ່ງ utilities . -
ປ່ຽນໄລຍະເວລາ toast ເລີ່ມຕົ້ນເປັນ 5 ວິນາທີ.
-
ເອົາອອກ
overflow: hidden
ຈາກ toasts ແລະທົດແທນດ້ວຍborder-radius
ຫນ້າ ທີ່ທີ່ເຫມາະສົມcalc()
.
ຄຳແນະນຳ
-
ແຕກປ່ຽນຊື່
.arrow
ເປັນ.tooltip-arrow
ແມ່ແບບຄໍາແນະນໍາເຄື່ອງມືເລີ່ມຕົ້ນຂອງພວກເຮົາ. -
ແຕກຄ່າເລີ່ມຕົ້ນສໍາລັບການ
fallbackPlacements
ຖືກປ່ຽນເປັນການ['top', 'right', 'bottom', 'left']
ຈັດວາງທີ່ດີກວ່າຂອງອົງປະກອບ popper. -
ແຕກປ່ຽນຊື່
whiteList
ທາງເລືອກເປັນallowList
.
ອຸປະໂພກ
-
ແຕກປ່ຽນຊື່ເຄື່ອງໃຊ້ຫຼາຍຢ່າງເພື່ອໃຊ້ຊື່ຊັບສິນຢ່າງມີເຫດຜົນແທນທີ່ຈະເປັນຊື່ທິດທາງດ້ວຍການເພີ່ມການສະຫນັບສະຫນູນ RTL:
- ປ່ຽນຊື່
.left-*
ແລະ.right-*
ເປັນ.start-*
ແລະ.end-*
. - ປ່ຽນຊື່
.float-left
ແລະ.float-right
ເປັນ.float-start
ແລະ.float-end
. - ປ່ຽນຊື່
.border-left
ແລະ.border-right
ເປັນ.border-start
ແລະ.border-end
. - ປ່ຽນຊື່
.rounded-left
ແລະ.rounded-right
ເປັນ.rounded-start
ແລະ.rounded-end
. - ປ່ຽນຊື່
.ml-*
ແລະ.mr-*
ເປັນ.ms-*
ແລະ.me-*
. - ປ່ຽນຊື່
.pl-*
ແລະ.pr-*
ເປັນ.ps-*
ແລະ.pe-*
. - ປ່ຽນຊື່
.text-left
ແລະ.text-right
ເປັນ.text-start
ແລະ.text-end
.
- ປ່ຽນຊື່
-
ແຕກປິດການນຳໃຊ້ຂອບທາງລົບໂດຍຄ່າເລີ່ມຕົ້ນ.
-
ເພີ່ມ
.bg-body
ຫ້ອງຮຽນໃຫມ່ສໍາລັບການຕັ້ງຄ່າ<body>
ພື້ນຫລັງຂອງອົງປະກອບເພີ່ມເຕີມຢ່າງໄວວາ. -
ເພີ່ມ ຜົນປະໂຫຍດຕໍາແຫນ່ງ ໃຫມ່ ສໍາລັບ
top
,right
,bottom
, ແລະleft
. ຄ່າປະກອບມີ0
,50%
, ແລະ100%
ສໍາລັບແຕ່ລະຊັບສິນ. -
ເພີ່ມໃຫມ່
.translate-middle-x
&.translate-middle-y
ຍູທິລິຕີ້ໃສ່ໃນແນວນອນຫຼືແນວຕັ້ງຢູ່ກາງອົງປະກອບຕໍາແຫນ່ງຢ່າງແທ້ຈິງ / ຄົງທີ່. -
ເພີ່ມອຸ ປະກອນການ
border-width
ໃຫມ່ . -
ແຕກປ່ຽນຊື່
.text-monospace
ເປັນ.font-monospace
. -
ແຕກເອົາອອກ
.text-hide
ເນື່ອງຈາກວ່າມັນເປັນວິທີການເກົ່າແກ່ສໍາລັບການເຊື່ອງຂໍ້ຄວາມທີ່ບໍ່ຄວນຖືກນໍາໃຊ້ອີກຕໍ່ໄປ. -
ເພີ່ມ ການນໍາ
.fs-*
ໃຊ້ສໍາລັບfont-size
ອຸປະກອນປະໂຫຍດ (ມີ RFS ເປີດໃຫ້ໃຊ້ງານ). ເຫຼົ່ານີ້ໃຊ້ຂະຫນາດດຽວກັນກັບຫົວຂໍ້ມາດຕະຖານຂອງ HTML (1-6, ໃຫຍ່ຫານ້ອຍ), ແລະສາມາດດັດແກ້ຜ່ານ Sass map. -
ແຕກປ່ຽນຊື່
.font-weight-*
ສາທານນູປະໂພກ.fw-*
ສໍາລັບຄວາມອ່ອນໂຍນແລະຄວາມສອດຄ່ອງ. -
ແຕກປ່ຽນຊື່
.font-style-*
ສາທານນູປະໂພກ.fst-*
ສໍາລັບຄວາມອ່ອນໂຍນແລະຄວາມສອດຄ່ອງ. -
ເພີ່ມ
.d-grid
ເພື່ອສະແດງຜົນປະໂຫຍດແລະຜົນປະໂຫຍດໃຫມ່gap
(.gap
) ສໍາລັບ CSS Grid ແລະ flexbox layouts. -
ແຕກເອົາອອກ
.rounded-sm
ແລະrounded-lg
, ແລະນໍາສະເຫນີຂະຫນາດໃຫມ່ຂອງຫ້ອງຮຽນ,.rounded-0
ກັບ.rounded-3
. ເບິ່ງ #31687 . -
ເພີ່ມອຸປະກອນການໃຫມ່
line-height
:.lh-1
,.lh-sm
,.lh-base
ແລະ.lh-lg
. ເບິ່ງ ທີ່ນີ້ . -
ຍ້າຍ
.d-none
ຜົນປະໂຫຍດໃນ CSS ຂອງພວກເຮົາເພື່ອໃຫ້ມັນມີນ້ໍາຫນັກຫຼາຍກວ່າອຸປະກອນການສະແດງອື່ນໆ. -
ຂະຫຍາຍຕົວ
.visually-hidden-focusable
ຊ່ວຍເພື່ອເຮັດວຽກກ່ຽວກັບພາຊະນະ, ໂດຍໃຊ້:focus-within
.
ຜູ້ຊ່ວຍ
-
ແຕກ ຕົວ ຊ່ວຍການຝັງທີ່ຕອບສະຫນອງໄດ້ຖືກປ່ຽນຊື່ເປັນ ຕົວ ຊ່ວຍອັດຕາສ່ວນ ທີ່ມີຊື່ຫ້ອງຮຽນໃຫມ່ແລະການປັບປຸງພຶດຕິກໍາ, ເຊັ່ນດຽວກັນກັບຕົວແປ CSS ທີ່ເປັນປະໂຫຍດ.
- ຫ້ອງຮຽນໄດ້ຖືກປ່ຽນຊື່ເພື່ອປ່ຽນ
by
ເປັນx
ອັດຕາສ່ວນລັກສະນະ. ສໍາລັບຕົວຢ່າງ,.ratio-16by9
ໃນປັດຈຸບັນ.ratio-16x9
. - ພວກເຮົາໄດ້ຖິ້ມ
.embed-responsive-item
ຕົວເລືອກກຸ່ມອົງປະກອບ ແລະຕົວເລືອກເພື່ອເລືອກຕົວເລືອກທີ່ງ່າຍກວ່າ.ratio > *
. ບໍ່ຈໍາເປັນຫ້ອງຮຽນເພີ່ມເຕີມ, ແລະຕົວຊ່ວຍອັດຕາສ່ວນໃນປັດຈຸບັນເຮັດວຽກກັບອົງປະກອບ HTML ໃດ. - ແຜນ ທີ່
$embed-responsive-aspect-ratios
Sass ໄດ້ຖືກປ່ຽນຊື່ເປັນ$aspect-ratios
ແລະຄ່າຂອງມັນໄດ້ຖືກເຮັດໃຫ້ງ່າຍດາຍເພື່ອປະກອບມີຊື່ຊັ້ນແລະອັດຕາສ່ວນເປັນkey: value
ຄູ່. - ຕົວແປ CSS ໄດ້ຖືກສ້າງຂື້ນໃນປັດຈຸບັນແລະລວມສໍາລັບແຕ່ລະຄ່າໃນແຜນທີ່ Sass. ແກ້ໄຂ
--bs-aspect-ratio
ຕົວແປ.ratio
ເພື່ອສ້າງ ອັດຕາສ່ວນແບບກຳນົດເອງ .
- ຫ້ອງຮຽນໄດ້ຖືກປ່ຽນຊື່ເພື່ອປ່ຽນ
-
ແຕກ ຫ້ອງຮຽນ “ຕົວອ່ານໜ້າຈໍ” ຕອນນີ້ແມ່ນຫ້ອງຮຽນ “ເຊື່ອງໄວ້ທາງສາຍຕາ” .
- ປ່ຽນໄຟລ໌ Sass ຈາກ
scss/helpers/_screenreaders.scss
ເປັນscss/helpers/_visually-hidden.scss
- ປ່ຽນຊື່
.sr-only
ແລະ.sr-only-focusable
ເປັນ.visually-hidden
ແລະ.visually-hidden-focusable
- ປ່ຽນຊື່
sr-only()
ແລະsr-only-focusable()
mixins ເປັນvisually-hidden()
ແລະvisually-hidden-focusable()
.
- ປ່ຽນໄຟລ໌ Sass ຈາກ
-
bootstrap-utilities.css
ໃນປັດຈຸບັນຍັງປະກອບມີຜູ້ຊ່ວຍຂອງພວກເຮົາ. ຜູ້ຊ່ວຍບໍ່ຈໍາເປັນຕ້ອງຖືກນໍາເຂົ້າໃນການກໍ່ສ້າງແບບກໍາຫນົດເອງອີກຕໍ່ໄປ.
JavaScript
-
ຍົກເລີກການເພິ່ງພາ jQuery ແລະຂຽນ plugins ຄືນໃໝ່ເພື່ອໃຫ້ຢູ່ໃນ JavaScript ປົກກະຕິ.
-
ແຕກຄຸນລັກສະນະຂໍ້ມູນສໍາລັບ plugins JavaScript ທັງຫມົດໃນປັດຈຸບັນແມ່ນ namespaced ເພື່ອຊ່ວຍຈໍາແນກການເຮັດວຽກຂອງ Bootstrap ຈາກພາກສ່ວນທີສາມແລະລະຫັດຂອງທ່ານເອງ. ຕົວຢ່າງ, ພວກເຮົາໃຊ້
data-bs-toggle
ແທນdata-toggle
. -
ປັ໊ກອິນທັງຫມົດສາມາດຍອມຮັບຕົວເລືອກ CSS ເປັນການໂຕ້ຖຽງທໍາອິດ. ທ່ານສາມາດຜ່ານອົງປະກອບ DOM ຫຼືຕົວເລືອກ CSS ທີ່ຖືກຕ້ອງເພື່ອສ້າງຕົວຢ່າງໃຫມ່ຂອງ plugin:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
ສາມາດຜ່ານເປັນຟັງຊັນທີ່ຍອມຮັບການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap ເປັນການໂຕ້ຖຽງ, ດັ່ງນັ້ນທ່ານສາມາດລວມການຕັ້ງຄ່າເລີ່ມຕົ້ນນີ້ໃນແບບຂອງເຈົ້າ. ໃຊ້ໄດ້ກັບ dropdowns, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມື. -
ຄ່າເລີ່ມຕົ້ນສໍາລັບການ
fallbackPlacements
ຖືກປ່ຽນເປັນການ['top', 'right', 'bottom', 'left']
ຈັດຕໍາແຫນ່ງທີ່ດີກວ່າຂອງອົງປະກອບ Popper. ໃຊ້ໄດ້ກັບ dropdowns, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມື. -
ລຶບຂີດກ້ອງອອກຈາກວິທີການສະຖິດສາທາລະນະເຊັ່ນ
_getInstance()
→getInstance()
.