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

ການເຄື່ອນຍ້າຍໄປ v5

ຕິດຕາມແລະທົບທວນການປ່ຽນແປງຂອງໄຟລ໌ Bootstrap, ເອກະສານ, ແລະອົງປະກອບຕ່າງໆເພື່ອຊ່ວຍໃຫ້ທ່ານຍ້າຍຈາກ v4 ໄປ v5.

ໃນໜ້ານີ້

v5.2.0

ການອອກແບບສົດຊື່ນ

Bootstrap v5.2.0 ມີການອັບເດດການອອກແບບທີ່ລະອຽດອ່ອນສຳລັບອົງປະກອບ ແລະ ຄຸນສົມບັດຈຳນວນໜຶ່ງໃນທົ່ວໂຄງການ, ໂດຍສະເພາະຢ່າງຍິ່ງຜ່ານຄ່າທີ່ຫລອມໂລຫະ border-radiusໃນປຸ່ມ ແລະ ການຄວບຄຸມແບບຟອມ . ເອກະສານຂອງພວກເຮົາຍັງໄດ້ຮັບການປັບປຸງດ້ວຍໜ້າຫຼັກໃໝ່, ຮູບແບບເອກະສານທີ່ລຽບງ່າຍກວ່າທີ່ຈະບໍ່ຫຍໍ້ສ່ວນຕ່າງໆຂອງແຖບດ້ານຂ້າງ, ແລະຕົວຢ່າງທີ່ໂດດເດັ່ນກວ່າຂອງ Bootstrap Icons .

ຕົວແປ CSS ເພີ່ມເຕີມ

ພວກເຮົາໄດ້ປັບປຸງອົງປະກອບຂອງພວກເຮົາທັງຫມົດເພື່ອນໍາໃຊ້ຕົວແປ CSS. ໃນຂະນະທີ່ Sass ຍັງ underpins ທຸກສິ່ງທຸກຢ່າງ, ແຕ່ລະອົງປະກອບໄດ້ຖືກປັບປຸງເພື່ອປະກອບມີຕົວແປ CSS ໃນຫ້ອງຮຽນພື້ນຖານອົງປະກອບ (ຕົວຢ່າງ, .btn), ອະນຸຍາດໃຫ້ມີການປັບແຕ່ງເວລາທີ່ແທ້ຈິງຂອງ Bootstrap. ໃນການປ່ອຍຕໍ່ໄປ, ພວກເຮົາຈະສືບຕໍ່ຂະຫຍາຍການນໍາໃຊ້ຕົວແປ CSS ຂອງພວກເຮົາເຂົ້າໄປໃນຮູບແບບ, ແບບຟອມ, ຜູ້ຊ່ວຍແລະຜົນປະໂຫຍດຂອງພວກເຮົາ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບຕົວແປ CSS ໃນແຕ່ລະອົງປະກອບໃນຫນ້າເອກະສານຂອງເຂົາເຈົ້າ.

ການໃຊ້ຕົວແປ CSS ຂອງພວກເຮົາຈະບໍ່ຄົບຖ້ວນພໍສົມຄວນຈົນກ່ວາ Bootstrap 6. ໃນຂະນະທີ່ພວກເຮົາຢາກຈະປະຕິບັດຢ່າງຄົບຖ້ວນໃນທົ່ວຄະນະ, ພວກມັນມີຄວາມສ່ຽງທີ່ຈະເຮັດໃຫ້ເກີດການປ່ຽນແປງທີ່ແຕກຫັກ. ຕົວຢ່າງ, ການຕັ້ງຄ່າ $alert-border-width: var(--bs-border-width)ໃນລະຫັດແຫຼ່ງຂອງພວກເຮົາທໍາລາຍ Sass ທີ່ມີທ່າແຮງໃນລະຫັດຂອງທ່ານເອງຖ້າທ່ານເຮັດ $alert-border-width * 2ດ້ວຍເຫດຜົນບາງຢ່າງ.

ດັ່ງນັ້ນ, ບ່ອນໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ພວກເຮົາຈະສືບຕໍ່ກ້າວໄປສູ່ຕົວແປ CSS ຫຼາຍຂຶ້ນ, ແຕ່ກະລຸນາຮັບຮູ້ການປະຕິບັດຂອງພວກເຮົາອາດຈະຖືກຈໍາກັດເລັກນ້ອຍໃນ v5.

ໃຫມ່_maps.scss

Bootstrap v5.2.0 ນໍາສະເຫນີໄຟລ໌ Sass ໃຫມ່ທີ່ມີ _maps.scss. ມັນດຶງເອົາແຜນທີ່ Sass ຫຼາຍໆອັນອອກມາ _variables.scssເພື່ອແກ້ໄຂບັນຫາທີ່ການປັບປຸງແຜນທີ່ຕົ້ນສະບັບບໍ່ໄດ້ນໍາໃຊ້ກັບແຜນທີ່ຮອງທີ່ຂະຫຍາຍພວກມັນ. ຕົວຢ່າງ, ການອັບເດດ $theme-colorsບໍ່ໄດ້ຖືກນໍາໃຊ້ກັບແຜນທີ່ຫົວຂໍ້ອື່ນໆທີ່ອີງໃສ່ $theme-colors, ທໍາລາຍຂັ້ນຕອນການປັບແຕ່ງທີ່ສໍາຄັນ. ໃນສັ້ນ, Sass ມີຂໍ້ຈໍາກັດທີ່ເມື່ອຕົວແປເລີ່ມຕົ້ນຫຼືແຜນທີ່ຖືກ ນໍາໃຊ້ , ມັນບໍ່ສາມາດປັບປຸງໄດ້. ມີຂໍ້ບົກຜ່ອງທີ່ຄ້າຍຄືກັນກັບຕົວແປ CSS ເມື່ອພວກມັນຖືກນໍາໃຊ້ເພື່ອປະກອບຕົວແປ CSS ອື່ນໆ.

ນີ້ແມ່ນເຫດຜົນທີ່ການປັບແຕ່ງຕົວແປໃນ Bootstrap ຈະຕ້ອງມາຫຼັງຈາກ @import "functions", ແຕ່ກ່ອນ @import "variables"ແລະສ່ວນທີ່ເຫຼືອຂອງ stack ນໍາເຂົ້າຂອງພວກເຮົາ. ດຽວກັນໃຊ້ກັບແຜນທີ່ Sass—ທ່ານຕ້ອງລົບລ້າງຄ່າເລີ່ມຕົ້ນກ່ອນທີ່ພວກມັນຈະຖືກນໍາໃຊ້. ແຜນ​ທີ່​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​ໄດ້​ຖືກ​ຍ້າຍ​ໄປ​ໃຫມ່ _maps.scss​:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

ການສ້າງ Bootstrap CSS ແບບກຳນົດເອງຂອງທ່ານຕອນນີ້ຄວນຈະມີລັກສະນະແບບນີ້ດ້ວຍການນຳເຂົ້າແຜນທີ່ແຍກຕ່າງຫາກ.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

ຜົນປະໂຫຍດໃຫມ່

  • ຂະຫຍາຍ ຜົນ font-weightປະໂຫຍດ ທີ່ຈະປະກອບມີ .fw-semiboldສໍາລັບຕົວອັກສອນ semibold.
  • ຂະຫຍາຍ ຜົນ border-radiusປະໂຫຍດ ທີ່ຈະປະກອບມີສອງຂະຫນາດໃຫມ່, .rounded-4ແລະ .rounded-5, ສໍາລັບທາງເລືອກເພີ່ມເຕີມ.

ການປ່ຽນແປງເພີ່ມເຕີມ

  • ແນະນຳ $enable-container-classesທາງເລືອກໃໝ່. — ຕອນນີ້ເມື່ອເລືອກເຂົ້າໃນການທົດລອງ CSS Grid layout, .container-*ຫ້ອງຮຽນຈະຍັງຖືກລວບລວມ, ເວັ້ນເສຍແຕ່ວ່າຕົວເລືອກນີ້ຖືກຕັ້ງເປັນ false. ປະຈຸບັນຕູ້ຄອນເທນເນີຍັງຮັກສາຄຸນຄ່າ gutter ຂອງເຂົາເຈົ້າ.

  • ອົງປະກອບ Offcanvas ປະຈຸບັນມີ ການປ່ຽນແປງ ທີ່ຕອບສະຫນອງ . ຊັ້ນ ຕົ້ນສະບັບ .offcanvasຍັງຄົງບໍ່ປ່ຽນແປງ - ມັນເຊື່ອງເນື້ອຫາໃນທົ່ວຊ່ອງເບິ່ງທັງຫມົດ. ເພື່ອເຮັດໃຫ້ມັນຕອບສະໜອງ, ໃຫ້ປ່ຽນຊັ້ນຮຽນນັ້ນ .offcanvasເປັນຫ້ອງຮຽນໃດກໍ .offcanvas-{sm|md|lg|xl|xxl}ໄດ້.

  • ຕອນນີ້ຕົວແບ່ງຕາຕະລາງທີ່ໜາກວ່າແມ່ນເລືອກເຂົ້າແລ້ວ. — ພວກ​ເຮົາ​ໄດ້​ເອົາ​ເສັ້ນ​ຊາຍ​ແດນ​ທີ່​ຫນາ​ກວ່າ​ແລະ​ຍາກ​ກວ່າ​ທີ່​ຈະ override ລະ​ຫວ່າງ​ກຸ່ມ​ຕາ​ຕະ​ລາງ​ແລະ​ຍ້າຍ​ມັນ​ໄປ​ໃນ​ຊັ້ນ​ຮຽນ​ເລືອກ​ທີ່​ທ່ານ​ສາ​ມາດ​ນໍາ​ໃຊ້​ໄດ້​, .table-group-divider. ເບິ່ງຕາຕະລາງເອກະສານສໍາລັບຕົວຢ່າງ.

  • Scrollspy ໄດ້ຖືກຂຽນຄືນໃຫມ່ ເພື່ອໃຊ້ Intersection Observer API , ຊຶ່ງຫມາຍຄວາມວ່າທ່ານບໍ່ຕ້ອງການ wrappers ພໍ່ແມ່ພີ່ນ້ອງ, ປະຕິເສດoffsetຄ່າ, ແລະອື່ນໆ. ຊອກຫາການຈັດຕັ້ງປະຕິບັດ Scrollspy ຂອງເຈົ້າໃຫ້ຖືກຕ້ອງ ແລະສອດຄ່ອງຫຼາຍຂຶ້ນໃນການເນັ້ນໃສ່ navigation.

  • Popovers ແລະຄໍາແນະນໍາເຄື່ອງມືໃນປັດຈຸບັນໃຊ້ຕົວແປ CSS. ບາງຕົວແປ CSS ໄດ້ຖືກປັບປຸງຈາກຄູ່ຮ່ວມງານ Sass ຂອງພວກເຂົາເພື່ອຫຼຸດຜ່ອນຈໍານວນຕົວແປ. ດັ່ງນັ້ນ, ສາມຕົວແປໄດ້ຖືກຍົກເລີກໃນການປ່ອຍນີ້: $popover-arrow-color, $popover-arrow-outer-color, ແລະ $tooltip-arrow-color.

  • ເພີ່ມ .text-bg-{color}ຜູ້ຊ່ວຍໃຫມ່. ແທນ​ທີ່​ຈະ​ກໍາ​ນົດ​ບຸກ​ຄົນ .text-*​ແລະ ​ອຸ .bg-*​ປະ​ກອນ​ປະ​ໂຫຍດ, ປັດ​ຈຸ​ບັນ​ທ່ານ​ສາ​ມາດ​ນໍາ​ໃຊ້ ​ຕົວ .text-bg-*​ຊ່ວຍ ​ເພື່ອ​ກໍາ​ນົດ​ທີ່ background-color​ມີ foreground ກົງ​ກັນ​ຂ້າມ color.

  • ເພີ່ມ .form-check-reverseຕົວແກ້ໄຂເພື່ອພິກຄໍາສັ່ງຂອງປ້າຍກຳກັບ ແລະກ່ອງໝາຍ/ວິທະຍຸທີ່ກ່ຽວຂ້ອງ.

  • ເພີ່ມ ຖັນເສັ້ນດ່າງ ຮອງຮັບຕາຕະລາງຜ່ານ .table-striped-columnsຊັ້ນຮຽນໃໝ່.

ສໍາລັບບັນຊີລາຍຊື່ຄົບຖ້ວນຂອງການປ່ຽນແປງ, ເບິ່ງໂຄງການ v5.2.0 ໃນ GitHub .

v5.1.0

  • ເພີ່ມການຮອງຮັບການທົດລອງສໍາລັບ CSS Grid layout . — ນີ້​ແມ່ນ​ການ​ເຮັດ​ວຽກ​ທີ່​ກໍາ​ລັງ​ດໍາ​ເນີນ​ການ​, ແລະ​ຍັງ​ບໍ່​ທັນ​ກຽມ​ພ້ອມ​ສໍາ​ລັບ​ການ​ນໍາ​ໃຊ້​ການ​ຜະ​ລິດ​, ແຕ່​ວ່າ​ທ່ານ​ສາ​ມາດ​ເລືອກ​ເຂົ້າ​ໄປ​ໃນ​ຄຸນ​ສົມ​ບັດ​ໃຫມ່​ໂດຍ​ຜ່ານ Sass​. ເພື່ອເປີດໃຊ້ງານມັນ, ປິດການໃຊ້ງານຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນ, ໂດຍການຕັ້ງຄ່າ $enable-grid-classes: falseແລະເປີດໃຊ້ CSS Grid ໂດຍການຕັ້ງຄ່າ $enable-cssgrid: true.

  • ອັບເດດ navbars ເພື່ອຮອງຮັບ offcanvas. — ເພີ່ມ drawers offcanvas ໃນ navbar ໃດ ທີ່ມີ .navbar-expand-*ຫ້ອງຮຽນຕອບສະຫນອງແລະບາງ offcanvas markup.

  • ເພີ່ມ ອົງປະກອບຕົວຍຶດ ໃຫມ່ . — ອົງປະກອບອັນໃໝ່ຫຼ້າສຸດຂອງພວກເຮົາ, ເປັນວິທີສະໜອງບລັອກຊົ່ວຄາວແທນເນື້ອຫາທີ່ແທ້ຈິງເພື່ອຊ່ວຍລະບຸວ່າມີບາງອັນຍັງໂຫຼດຢູ່ໃນເວັບໄຊ ຫຼືແອັບຂອງທ່ານ.

  • ຫຍໍ້ plugin ໃນປັດຈຸບັນສະຫນັບສະຫນູນ ການລົ້ມລົງຕາມລວງນອນ . — ເພີ່ມ .collapse-horizontal​ໃສ່​ຂອງ​ທ່ານ .collapse​ເພື່ອ​ຫຍໍ້​ລົງ width​ແທນ​ທີ່​ຈະ​ເປັນ height. ຫຼີກເວັ້ນການທາສີຂອງຕົວທ່ອງເວັບໂດຍການຕັ້ງຄ່າ min-heightຫຼື height.

  • ເພີ່ມຕົວຊ່ວຍກົດລະບຽບແນວຕັ້ງ ແລະ stack ໃໝ່. — ນຳໃຊ້ຄຸນສົມບັດ flexbox ຫຼາຍອັນຢ່າງວ່ອງໄວເພື່ອສ້າງໂຄງຮ່າງແບບກຳນົດເອງດ້ວຍ stacks . ເລືອກຈາກແນວນອນ ( .hstack) ແລະແນວຕັ້ງ ( .vstack) stacks. ເພີ່ມຕົວແບ່ງແນວຕັ້ງທີ່ຄ້າຍຄືກັບ <hr>ອົງປະກອບທີ່ມີຕົວ ຊ່ວຍ ໃຫມ່.vr .

  • ເພີ່ມ :rootຕົວແປ CSS ທົ່ວໂລກໃຫມ່. — ໄດ້ເພີ່ມຕົວແປ CSS ໃໝ່ຫຼາຍອັນໃຫ້ກັບ :rootລະດັບສຳລັບການຄວບຄຸມ <body>ຮູບແບບຕ່າງໆ. ມີຫຼາຍອັນຢູ່ໃນວຽກງານ, ລວມທັງທົ່ວສາທາລະນູປະໂພກ ແລະອົງປະກອບຂອງພວກເຮົາ, ແຕ່ຕອນນີ້ໃຫ້ອ່ານ ຕົວແປ CSS ໃນສ່ວນ ປັບແຕ່ງ .

  • ປັບປຸງສີ ແລະເຄື່ອງໃຊ້ພື້ນຫຼັງເພື່ອໃຊ້ຕົວແປ CSS, ແລະເພີ່ມຄວາມໂປ່ງໃສຂໍ້ຄວາມໃໝ່ ແລະ ຜົນ ປະໂຫຍດ ຄວາມໂປ່ງໃສຂອງພື້ນຫຼັງ . — .text-* ແລະ .bg-*utilities ໃນ​ປັດ​ຈຸ​ບັນ​ໄດ້​ຖືກ​ສ້າງ​ຂຶ້ນ​ດ້ວຍ​ຕົວ​ແປ CSS ແລະ rgba()​ຄ່າ​ສີ​, ເຮັດ​ໃຫ້​ທ່ານ​ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ປັບ​ອຸ​ປະ​ກອນ​ການ​ໃດໆ​ທີ່​ມີ​ອຸ​ປະ​ກອນ​ຄວາມ​ໂປ່ງ​ໃສ​ໃຫມ່​.

  • ເພີ່ມຕົວຢ່າງ snippet ໃຫມ່ໂດຍອີງໃສ່ການສະແດງວິທີການປັບແຕ່ງອົງປະກອບຂອງພວກເຮົາ. — ດຶງ​ພ້ອມ​ທີ່​ຈະ​ນໍາ​ໃຊ້​ອົງ​ປະ​ກອບ​ທີ່​ປັບ​ແຕ່ງ​ເອງ​ແລະ​ຮູບ​ແບບ​ການ​ອອກ​ແບບ​ທົ່ວ​ໄປ​ອື່ນໆ​ທີ່​ມີ ​ຕົວ​ຢ່າງ Snippets ໃຫມ່​ຂອງ​ພວກ​ເຮົາ ​. ລວມ ມີ footers , dropdowns , ກຸ່ມລາຍຊື່ , ແລະ modals .

  • ເອົາຮູບແບບການຈັດຕໍາແຫນ່ງທີ່ບໍ່ໄດ້ໃຊ້ອອກຈາກ popovers ແລະຄໍາແນະນໍາ ເຄື່ອງມື ຍ້ອນວ່າສິ່ງເຫຼົ່ານີ້ແມ່ນຈັດການໂດຍ Popper ເທົ່ານັ້ນ. $tooltip-marginໄດ້ຖືກຍົກເລີກ ແລະຕັ້ງ nullຢູ່ໃນຂະບວນການ.

ຕ້ອງການຂໍ້ມູນເພີ່ມເຕີມບໍ? ອ່ານບົດຄວາມ blog v5.1.0.

ສະ​ບາຍ​ດີ! ການປ່ຽນແປງຕໍ່ກັບການປ່ອຍ Bootstrap 5, v5.0.0 ທີ່ສໍາຄັນຄັ້ງທໍາອິດຂອງພວກເຮົາ, ແມ່ນບັນທຶກໄວ້ຂ້າງລຸ່ມນີ້. ພວກມັນບໍ່ສະທ້ອນເຖິງການປ່ຽນແປງເພີ່ມເຕີມທີ່ສະແດງຂ້າງເທິງ.

ການເພິ່ງພາອາໄສ

  • ຫຼຸດລົງ 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 ອີກຕໍ່ໄປ. ເບິ່ງ #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-control.custom-checkboxດຽວນີ້ .form-check.
    • .custom-control.custom-custom-radioດຽວນີ້ .form-check.
    • .custom-control.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 ໄດ້​.

  • ການຄວບຄຸມແບບຟອມບໍ່ໄດ້ໃຊ້ແລ້ວຄົງ heightທີ່ເມື່ອເປັນໄປໄດ້, ແທນທີ່ຈະເລື່ອນໄປ min-heightປັບປຸງການປັບແຕ່ງ ແລະເຂົ້າກັນໄດ້ກັບອົງປະກອບອື່ນໆ.

  • ໄອຄອນການກວດສອບບໍ່ໄດ້ໃຊ້ກັບ <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"ຄຸນສົມບັດທີ່ຕັ້ງໄວ້ເມື່ອການຈັດຕຳແໜ່ງຂອງເລື່ອນລົງແບບຄົງທີ່, ຫຼືແບບເລື່ອນລົງຢູ່ໃນແຖບນຳທາງ. ນີ້ແມ່ນເພີ່ມໂດຍ 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 ຕ້ອງການ).
  • ແຕກຫ້ອງ .activeຮຽນບໍ່ສາມາດຖືກນຳໃຊ້ກັບ .nav-items ໄດ້ອີກຕໍ່ໄປ, ມັນຕ້ອງຖືກນຳໃຊ້ໂດຍກົງກັບ .nav-links.

ຜ້າໃບ

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:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigສາມາດຖືກສົ່ງຜ່ານເປັນຫນ້າທີ່ຍອມຮັບການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap ເປັນການໂຕ້ຖຽງ, ດັ່ງນັ້ນທ່ານສາມາດລວມການຕັ້ງຄ່າເລີ່ມຕົ້ນນີ້ໃນທາງຂອງເຈົ້າ. ໃຊ້ໄດ້ກັບ dropdowns, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມື.

  • ຄ່າເລີ່ມຕົ້ນສໍາລັບການ fallbackPlacementsຖືກປ່ຽນເປັນການ ['top', 'right', 'bottom', 'left']ຈັດຕໍາແຫນ່ງທີ່ດີກວ່າຂອງອົງປະກອບ Popper. ໃຊ້ໄດ້ກັບ dropdowns, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມື.

  • ລຶບຂີດກ້ອງອອກຈາກວິທີການສະຖິດສາທາລະນະເຊັ່ນ _getInstance()→ getInstance().