ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ການເຄື່ອນຍ້າຍໄປ 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-shadowmixins ໃນປັດຈຸບັນອະນຸຍາດໃຫ້ 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-colmixin ເປັນຄ່າເລີ່ມຕົ້ນເປັນຖັນເທົ່າກັນໂດຍບໍ່ມີຂະຫນາດທີ່ກໍານົດໄວ້.

ເນື້ອໃນ, reboot, ແລະອື່ນໆ

  • ດຽວນີ້ RFS ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ. ຫົວຂໍ້ທີ່ໃຊ້font-size()mixin ອັດຕະໂນມັດຈະປັບfont-sizeຂະຫນາດຂອງເຂົາເຈົ້າກັບ viewport ໄດ້. ຄຸນ​ນະ​ສົມ​ບັດ​ນີ້​ໃນ​ເມື່ອ​ກ່ອນ​ໄດ້​ຮັບ​ການ​ເລືອກ​ເຂົ້າ​ກັບ v4.

  • ແຕກປັບປຸງການພິມຕົວພິມຂອງພວກເຮົາເພື່ອທົດແທນ $display-*ຕົວແປຂອງພວກເຮົາ ແລະດ້ວຍ $display-font-sizesແຜນທີ່ Sass. ນອກ​ຈາກ​ນີ້​ຍັງ​ໄດ້​ລົບ $display-*-weight​ຕົວ​ແປ​ສ່ວນ​ບຸກ​ຄົນ​ສໍາ​ລັບ​ການ​ດຽວ $display-font-weight​ແລະ​ປັບ font-sizes​.

  • ເພີ່ມສອງ .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

  • ແຕກ <hr>ອົງປະກອບໃນປັດຈຸບັນໃຊ້ heightແທນທີ່ borderຈະສະຫນັບສະຫນູນ sizeຄຸນລັກສະນະທີ່ດີກວ່າ. ອັນນີ້ຍັງຊ່ວຍໃຫ້ການນຳໃຊ້ອຸປະກອນເສີມເພື່ອສ້າງຕົວແບ່ງທີ່ໜາຂຶ້ນ (ຕົວຢ່າງ, <hr class="py-1">).

  • ຣີເຊັດຄ່າເລີ່ມຕົ້ນຕາມແນວນອນ 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 .

ອັກຄີໄພ

ແຈ້ງເຕືອນ

  • ດຽວນີ້ການແຈ້ງເຕືອນມີ ຕົວຢ່າງທີ່ມີໄອຄອນ .

  • ລຶບຮູບແບບກຳນົດເອງສຳລັບ <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-darkຕົວແປ ໃໝ່ ສຳລັບຂໍ້ຄວາມມືດ, ການຄວບຄຸມ ແລະຕົວຊີ້ວັດ (ດີຫຼາຍສຳລັບພື້ນຫຼັງທີ່ອ່ອນກວ່າ).

  • ແທນທີ່ໄອຄອນ chevron ສໍາລັບການຄວບຄຸມ carousel ດ້ວຍ SVGs ໃໝ່ຈາກ Bootstrap Icons .

ປຸ່ມປິດ

  • ແຕກປ່ຽນຊື່ ເປັນຊື່ທົ່ວ .closeໄປ .btn-closeໜ້ອຍກວ່າ.

  • ປຸ່ມປິດດຽວນີ້ໃຊ້ background-image(ຝັງ SVG) ແທນທີ່ຈະເປັນ &times;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-items ຫໍ່ຢູ່ໃນ <li>s.

ຈູມໂບຕຣອນ

ລາຍຊື່ກຸ່ມ

  • ເພີ່ມ nullຕົວແປໃຫມ່ສໍາລັບ font-size, font-weight, color, ແລະ :hover colorຫ້ອງ .nav-linkຮຽນ.
  • ແຕກດຽວນີ້ Navbars ຕ້ອງການບັນຈຸພາຍໃນ (ເພື່ອເຮັດໃຫ້ຄວາມຕ້ອງການຊ່ອງຫວ່າງແລະ CSS ຕ້ອງການ).

ຜ້າໃບ

Pagination

  • ຕອນນີ້ລິ້ງ Pagination ສາມາດປັບແຕ່ງໄດ້ margin-leftເຊິ່ງເປັນຮູບກົມແບບໄດນາມິກໃນທຸກມຸມເມື່ອແຍກອອກຈາກກັນ.

  • ເພີ່ມ transitions ກັບການເຊື່ອມຕໍ່ 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-ratiosSass ໄດ້ຖືກປ່ຽນຊື່ເປັນ $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().

  • 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().