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

Bootstrap 4 ແມ່ນການຂຽນຄືນໃຫມ່ທີ່ສໍາຄັນຂອງໂຄງການທັງຫມົດ. ການປ່ຽນແປງທີ່ໂດດເດັ່ນທີ່ສຸດແມ່ນໄດ້ສະຫຼຸບຂ້າງລຸ່ມນີ້, ຕິດຕາມມາດ້ວຍການປ່ຽນແປງສະເພາະເພີ່ມເຕີມຕໍ່ກັບອົງປະກອບທີ່ກ່ຽວຂ້ອງ.

ການປ່ຽນແປງທີ່ຫມັ້ນຄົງ

ການເຄື່ອນຍ້າຍຈາກ Beta 3 ໄປສູ່ການປ່ອຍ v4.x ທີ່ຫມັ້ນຄົງຂອງພວກເຮົາ, ບໍ່ມີການປ່ຽນແປງທີ່ແຕກຫັກ, ແຕ່ມີບາງການປ່ຽນແປງທີ່ໂດດເດັ່ນ.

ການພິມ

• ແກ້ໄຂເຄື່ອງພິມທີ່ແຕກຫັກ. ກ່ອນຫນ້ານີ້, ການໃຊ້ .d-print-*class ອາດຈະ overrue .d-*ຫ້ອງຮຽນອື່ນໂດຍບໍ່ຄາດຄິດ. ໃນ​ປັດ​ຈຸ​ບັນ​, ພວກ​ເຂົາ​ເຈົ້າ​ກົງ​ກັບ​ອຸ​ປະ​ກອນ​ການ​ສະ​ແດງ​ອື່ນໆ​ຂອງ​ພວກ​ເຮົາ​ແລະ​ພຽງ​ແຕ່​ນໍາ​ໃຊ້​ກັບ​ສື່​ມວນ​ຊົນ​ທີ່ ( @media print) .

• ຂະຫຍາຍອຸປະກອນການສະແດງຜົນການພິມທີ່ມີຢູ່ເພື່ອໃຫ້ກົງກັບເຄື່ອງໃຊ້ອື່ນໆ. Beta 3 ແລະເກົ່າກວ່າມີພຽງແຕ່ block, inline-block, inline, ແລະ none. Stable v4 ເພີ່ມ flex, inline-flex, table, table-row, ແລະ table-cell.

• ແກ້ໄຂການສະແດງຕົວຢ່າງການພິມໃນທົ່ວຕົວທ່ອງເວັບທີ່ມີຮູບແບບການພິມໃຫມ່ທີ່ລະບຸ @page size.

ການປ່ຽນແປງເບຕ້າ 3

ໃນຂະນະທີ່ Beta 2 ໄດ້ເຫັນສ່ວນໃຫຍ່ຂອງການປ່ຽນແປງທີ່ແຕກຫັກຂອງພວກເຮົາໃນລະຫວ່າງໄລຍະເບຕ້າ, ແຕ່ພວກເຮົາຍັງມີຈໍານວນຫນ້ອຍທີ່ຕ້ອງໄດ້ຮັບການແກ້ໄຂໃນການປ່ອຍ Beta 3. ການປ່ຽນແປງເຫຼົ່ານີ້ນຳໃຊ້ຖ້າທ່ານກຳລັງອັບເດດເປັນ Beta 3 ຈາກ Beta 2 ຫຼື Bootstrap ເວີຊັນເກົ່າກວ່າ.

ຕ່າງໆ

• ເອົາ $thumbnail-transitionຕົວແປທີ່ບໍ່ໄດ້ໃຊ້ອອກ. ພວກເຮົາບໍ່ໄດ້ປ່ຽນຫຍັງ, ສະນັ້ນມັນເປັນພຽງແຕ່ລະຫັດພິເສດ.
• ແພັກເກັດ npm ບໍ່ປະກອບມີໄຟລ໌ອື່ນນອກເໜືອໄປຈາກໄຟລ໌ຕົ້ນສະບັບ ແລະໄຟລ໌ dist ຂອງພວກເຮົາອີກຕໍ່ໄປ; ຖ້າທ່ານອີງໃສ່ພວກມັນແລະກໍາລັງແລ່ນສະຄິບຂອງພວກເຮົາຜ່ານ node_modulesໂຟເດີ, ທ່ານຄວນປັບຂະບວນການເຮັດວຽກຂອງທ່ານ.

ແບບຟອມ

• ຂຽນໃໝ່ທັງກ່ອງກາໝາຍ ແລະວິທະຍຸແບບກຳນົດເອງ ແລະເລີ່ມຕົ້ນ. ໃນປັດຈຸບັນ, ທັງສອງມີໂຄງສ້າງ HTML ທີ່ກົງກັນ (ນອກ <div>ກັບອ້າຍເອື້ອຍນ້ອງ <input>ແລະ <label>) ແລະຮູບແບບການຈັດວາງດຽວກັນ (stacked default, inline with modifier class). ອັນນີ້ອະນຸຍາດໃຫ້ພວກເຮົາຈັດຮູບແບບປ້າຍກຳກັບໂດຍອີງໃສ່ສະຖານະຂອງວັດສະດຸປ້ອນ, ເຮັດໃຫ້ການຮອງຮັບ disabledຄຸນລັກສະນະງ່າຍຂຶ້ນ (ກ່ອນໜ້ານີ້ຕ້ອງໃຊ້ຊັ້ນແມ່) ແລະຮອງຮັບການຢັ້ງຢືນແບບຟອມຂອງພວກເຮົາໄດ້ດີຂຶ້ນ.

  ເປັນສ່ວນຫນຶ່ງຂອງການນີ້, ພວກເຮົາໄດ້ປ່ຽນ CSS ສໍາລັບການຄຸ້ມຄອງຫຼາຍ background-images ໃນ checkboxes ຮູບແບບ custom ແລະວິທະຍຸ. ກ່ອນໜ້ານີ້, .custom-control-indicatorອົງປະກອບທີ່ລຶບອອກຕອນນີ້ມີສີພື້ນຫຼັງ, gradient, ແລະໄອຄອນ SVG. ການປັບແຕ່ງສີພື້ນຫຼັງນັ້ນໝາຍເຖິງການປ່ຽນແທນທັງໝົດທຸກຄັ້ງທີ່ເຈົ້າຕ້ອງການປ່ຽນອັນດຽວ. ໃນປັດຈຸບັນ, ພວກເຮົາມີ .custom-control-label::beforeສໍາລັບການຕື່ມຂໍ້ມູນໃສ່ແລະ gradient ແລະ .custom-control-label::afterຈັດການໄອຄອນ.

  ເພື່ອເຮັດໃຫ້ການກວດສອບແບບກຳນົດເອງໃນແຖວ, ເພີ່ມ .custom-control-inline.

• ອັບເດດຕົວເລືອກສຳລັບກຸ່ມປຸ່ມທີ່ອີງໃສ່ການປ້ອນຂໍ້ມູນ. ແທນທີ່ຈະເປັນ [data-toggle="buttons"] { }ຮູບແບບແລະພຶດຕິກໍາ, ພວກເຮົາໃຊ້ dataຄຸນລັກສະນະພຽງແຕ່ສໍາລັບພຶດຕິກໍາ JS ແລະອີງໃສ່ .btn-group-toggleຊັ້ນໃຫມ່ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່.

• ເອົາອອກ .col-form-legendໃນເງື່ອນໄຂຂອງການປັບປຸງເລັກນ້ອຍ .col-form-label. ວິທີນີ້ .col-form-label-smແລະ .col-form-label-lgສາມາດຖືກນໍາໃຊ້ໃນ <legend>ອົງປະກອບທີ່ມີຄວາມສະດວກສະບາຍ.

• ການປ້ອນຂໍ້ມູນໄຟລ໌ແບບກຳນົດເອງໄດ້ຮັບການປ່ຽນແປງຕໍ່ກັບ $custom-file-textຕົວແປ Sass ຂອງເຂົາເຈົ້າ. ມັນບໍ່ແມ່ນແຜນທີ່ Sass ທີ່ຖືກວາງໄວ້ແລ້ວ ແລະຕອນນີ້ໃຫ້ພະລັງງານພຽງສາຍດຽວເທົ່ານັ້ນ— Browseປຸ່ມນັ້ນເປັນພຽງອົງປະກອບ pseudo-ອົງປະກອບທີ່ສ້າງຂຶ້ນຈາກ Sass ຂອງພວກເຮົາ. ຂໍ້ Choose fileຄວາມຕອນນີ້ມາຈາກ .custom-file-label.

ກຸ່ມປ້ອນຂໍ້ມູນ

• ປະຈຸບັນ addons ກຸ່ມການປ້ອນຂໍ້ມູນແມ່ນສະເພາະກັບການຈັດວາງຂອງພວກເຂົາທີ່ກ່ຽວຂ້ອງກັບການປ້ອນຂໍ້ມູນ. ພວກເຮົາໄດ້ຫຼຸດລົງ .input-group-addonແລະ .input-group-btnສໍາລັບສອງຫ້ອງຮຽນໃຫມ່, .input-group-prependແລະ .input-group-append. ເຈົ້າຕ້ອງໃຊ້ສ່ວນຊ້ອນທ້າຍ ຫຼື prepend ທັນທີ, ເຮັດໃຫ້ CSS ຂອງພວກເຮົາງ່າຍຂຶ້ນຫຼາຍ. ພາຍໃນສ່ວນຊ້ອນທ້າຍ ຫຼືສ່ວນທ້າຍ, ໃຫ້ໃສ່ປຸ່ມຂອງເຈົ້າຕາມທີ່ພວກມັນຈະມີຢູ່ບ່ອນອື່ນ, ແຕ່ຫໍ່ຂໍ້ຄວາມໃສ່ .input-group-text.

• ຮູບແບບການກວດສອບຖືກຮອງຮັບແລ້ວ, ຄືກັບການປ້ອນຂໍ້ມູນຫຼາຍອັນ (ເຖິງແມ່ນເຈົ້າສາມາດກວດສອບໄດ້ພຽງໜຶ່ງອິນພຸດຕໍ່ກຸ່ມ).

• ຫ້ອງຮຽນຂະຫນາດຈະຕ້ອງຢູ່ໃນພໍ່ແມ່ .input-groupແລະບໍ່ແມ່ນອົງປະກອບຂອງຮູບແບບສ່ວນບຸກຄົນ.

ການປ່ຽນແປງເບຕ້າ 2

ໃນຂະນະທີ່ຢູ່ໃນເບຕ້າ, ພວກເຮົາມີຈຸດປະສົງທີ່ຈະບໍ່ມີການປ່ຽນແປງທີ່ແຕກຫັກ. ຢ່າງໃດກໍຕາມ, ສິ່ງຕ່າງໆບໍ່ສະເຫມີໄປຕາມແຜນການ. ຂ້າງລຸ່ມນີ້ແມ່ນການປ່ຽນແປງທີ່ແຕກຫັກທີ່ຕ້ອງຈື່ໄວ້ເມື່ອຍ້າຍຈາກ Beta 1 ໄປ Beta 2.

ແຕກ

• ລຶບ $badge-colorຕົວແປອອກ ແລະການນຳໃຊ້ຂອງມັນຢູ່ໃນ .badge. ພວກເຮົາໃຊ້ຟັງຊັນຄວາມຄົມຊັດຂອງສີເພື່ອເລືອກ colorຕາມ background-colorຕົວແປ , ດັ່ງນັ້ນຕົວແປແມ່ນບໍ່ຈໍາເປັນ.
• ປ່ຽນຊື່ grayscale()ຟັງຊັນເພື່ອ gray()ຫຼີກເວັ້ນການຂັດກັນກັບ grayscaleຕົວກອງຕົ້ນສະບັບ CSS.
• ປ່ຽນຊື່ .table-inverse, .thead-inverse, ແລະ , ແລະ , ກົງກັບຮູບແບບສີຂອງພວກເຮົາທີ່ໃຊ້ຢູ່ບ່ອນອື່ນ .thead-default..*-dark.*-light
• ຕາຕະລາງທີ່ຕອບສະຫນອງໃນປັດຈຸບັນສ້າງຫ້ອງຮຽນສໍາລັບແຕ່ລະ breakpoint ຂອງຕາຂ່າຍໄຟຟ້າ. ນີ້ແຍກຈາກ Beta 1 ໃນສິ່ງທີ່ .table-responsiveເຈົ້າເຄີຍໃຊ້ແມ່ນຄ້າຍຄື .table-responsive-md. ດຽວນີ້ເຈົ້າອາດຈະໃຊ້ .table-responsiveຫຼື .table-responsive-{sm,md,lg,xl}ຕາມຄວາມຕ້ອງການ.
• ການຫຼຸດລົງການສະຫນັບສະຫນູນ Bower ເປັນຜູ້ຈັດການຊຸດໄດ້ຖືກປະຕິເສດສໍາລັບທາງເລືອກ (ເຊັ່ນ: ເສັ້ນດ້າຍຫຼື npm). ເບິ່ງ bower/wower#2298 ສໍາລັບລາຍລະອຽດ.
• Bootstrap ຍັງຕ້ອງການ jQuery 1.9.1 ຫຼືສູງກວ່າ, ແຕ່ທ່ານແນະນໍາໃຫ້ໃຊ້ເວີຊັນ 3.x ເນື່ອງຈາກຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນຂອງ v3.x ແມ່ນສິ່ງທີ່ Bootstrap ສະຫນັບສະຫນູນບວກກັບ v3.x ມີການແກ້ໄຂຄວາມປອດໄພບາງຢ່າງ.
• ເອົາຊັ້ນທີ່ບໍ່ໄດ້ໃຊ້ອອກ .form-control-label. ຖ້າທ່ານໄດ້ໃຊ້ຄລາສນີ້, ມັນແມ່ນການຊໍ້າກັນຂອງ .col-form-labelຊັ້ນຮຽນທີ່ຕັ້ງຈຸດສູນກາງຕາມແນວຕັ້ງ <label>ດ້ວຍການປ້ອນຂໍ້ມູນທີ່ກ່ຽວຂ້ອງຂອງມັນຢູ່ໃນການຈັດຮູບແບບແນວນອນ.
• ປ່ຽນ color-yiqຈາກ mixin ທີ່ປະກອບມີ colorຄຸນສົມບັດເປັນຟັງຊັນທີ່ສົ່ງຄືນຄ່າ, ອະນຸຍາດໃຫ້ທ່ານໃຊ້ມັນສໍາລັບຊັບສິນ CSS ໃດໆ. ຕົວຢ່າງ, ແທນທີ່ຈະ color-yiq(#000), ເຈົ້າຈະຂຽນ color: color-yiq(#000);.

ຈຸດເດັ່ນ

• ແນະນໍາການ pointer-eventsນໍາໃຊ້ໃຫມ່ໃນ modals. ພາຍນອກ .modal-dialogຜ່ານເຫດການທີ່ມີ pointer-events: noneການຈັດການຄລິກທີ່ກໍາຫນົດເອງ (ເຮັດໃຫ້ມັນເປັນໄປໄດ້ພຽງແຕ່ຟັງ .modal-backdropສໍາລັບການຄລິກໃດກໍ່ຕາມ), ແລະຫຼັງຈາກນັ້ນ counteracts ມັນສໍາລັບຕົວຈິງ .modal-contentກັບ pointer-events: auto.

ສະຫຼຸບ

ນີ້ແມ່ນລາຍການປີ້ໃຫຍ່ທີ່ເຈົ້າຕ້ອງການຮູ້ເມື່ອຍ້າຍຈາກ v3 ໄປ v4.

ຮອງຮັບຕົວທ່ອງເວັບ

• ຫຼຸດການຮອງຮັບ IE8, IE9 ແລະ iOS 6. v4 ໃນປັດຈຸບັນມີພຽງແຕ່ IE10+ ແລະ iOS 7+ ເທົ່ານັ້ນ. ສໍາລັບເວັບໄຊທີ່ຕ້ອງການອັນໃດອັນໜຶ່ງ, ໃຫ້ໃຊ້ v3.
• ເພີ່ມການສະຫນັບສະຫນູນຢ່າງເປັນທາງການສໍາລັບ Android v5.0 Lollipop's Browser ແລະ WebView. ເວີຊັນກ່ອນໜ້າຂອງ Android Browser ແລະ WebView ຍັງຄົງຮອງຮັບຢ່າງບໍ່ເປັນທາງການເທົ່ານັ້ນ.

ການປ່ຽນແປງທົ່ວໂລກ

• Flexbox ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ. ໂດຍທົ່ວໄປແລ້ວ, ນີ້ຫມາຍເຖິງການຍ້າຍອອກຈາກການລອຍຕົວແລະສິ່ງອື່ນໆໃນທົ່ວອົງປະກອບຂອງພວກເຮົາ.
• ປ່ຽນຈາກ Less ເປັນ Sass ສໍາລັບໄຟລ໌ CSS ຂອງພວກເຮົາ.
• ປ່ຽນຈາກ pxເປັນ remຫນ່ວຍບໍລິການ CSS ຕົ້ນຕໍຂອງພວກເຮົາ, ເຖິງແມ່ນວ່າ pixels ຍັງຖືກນໍາໃຊ້ສໍາລັບການສອບຖາມສື່ແລະພຶດຕິກໍາຕາຂ່າຍໄຟຟ້າຍ້ອນວ່າ viewports ອຸປະກອນບໍ່ໄດ້ຮັບຜົນກະທົບຈາກຂະຫນາດປະເພດ.
• ຂະຫນາດຕົວອັກສອນທົ່ວໂລກເພີ່ມຂຶ້ນ 14pxຈາກ 16px.
• ປັບປຸງລະບົບຕາຂ່າຍໄຟຟ້າເພື່ອເພີ່ມທາງເລືອກທີຫ້າ (ແກ້ໄຂອຸປະກອນຂະຫນາດນ້ອຍກວ່າຢູ່ 576pxຂ້າງລຸ່ມ) ແລະລຶບຂໍ້ມູນອອກ -xsຈາກຊັ້ນຮຽນເຫຼົ່ານັ້ນ. ຕົວຢ່າງ: .col-6.col-sm-4.col-md-3.
• ແທນທີ່ຫົວຂໍ້ທາງເລືອກທີ່ແຍກຕ່າງຫາກດ້ວຍທາງເລືອກທີ່ກໍາຫນົດຄ່າຜ່ານຕົວແປ SCSS (ຕົວຢ່າງ, $enable-gradients: true).
• ກໍ່ສ້າງລະບົບປັບປຸງເພື່ອໃຊ້ຊຸດຂອງ npm scripts ແທນ Grunt. ເບິ່ງ package.jsonສໍາລັບສະຄິບທັງຫມົດ, ຫຼືໂຄງການຂອງພວກເຮົາ readme ສໍາລັບຄວາມຕ້ອງການຂອງການພັດທະນາທ້ອງຖິ່ນ.
• ບໍ່ຮອງຮັບການນຳໃຊ້ Bootstrap ແບບບໍ່ຕອບສະໜອງ.
• ຍົກເລີກຕົວປັບແຕ່ງອອນລາຍເພື່ອຮອງຮັບເອກະສານການຕັ້ງຄ່າທີ່ກວ້າງຂວາງ ແລະການສ້າງແບບປັບແຕ່ງເອງ.
• ເພີ່ມ ຫ້ອງຮຽນຜົນປະໂຫຍດ ໃຫມ່ຫຼາຍສິບອັນ ສໍາລັບຄູ່ຊັບສິນ CSS ທົ່ວໄປ ແລະທາງລັດໄລຍະຫ່າງຂອງຂອບ/ຊ່ອງຫວ່າງ.

ລະບົບຕາຂ່າຍ

• ຍ້າຍໄປ flexbox.
  • ເພີ່ມການສະຫນັບສະຫນູນສໍາລັບ flexbox ໃນ mixins ຕາຂ່າຍໄຟຟ້າແລະຫ້ອງຮຽນທີ່ກໍານົດໄວ້ລ່ວງຫນ້າ.
  • ເປັນສ່ວນຫນຶ່ງຂອງ flexbox, ລວມທັງການສະຫນັບສະຫນູນສໍາລັບຫ້ອງຮຽນການຈັດຕໍາແຫນ່ງແນວຕັ້ງແລະແນວນອນ.
• ອັບ​ເດດ​ຊື່​ຊັ້ນ​ຕາ​ຂ່າຍ​ໄຟ​ຟ້າ​ແລະ​ຊັ້ນ​ຕາ​ຂ່າຍ​ໄຟ​ຟ້າ​ໃຫມ່​.
  • ໄດ້ເພີ່ມ smຕາຂ່າຍໄຟຟ້າໃໝ່ຢູ່ລຸ່ມນີ້ 768pxເພື່ອຄວບຄຸມແບບລະອຽດ. ດຽວນີ້ພວກເຮົາມີ xs, sm, md, lg, ແລະ xl. ນີ້ຍັງຫມາຍຄວາມວ່າທຸກຊັ້ນໄດ້ຖືກຕີຂຶ້ນຫນຶ່ງລະດັບ (ດັ່ງນັ້ນ .col-md-6ໃນ v3 ປະຈຸບັນ .col-lg-6ຢູ່ໃນ v4).
  • xsgrid classes ໄດ້ຖືກດັດແກ້ເພື່ອບໍ່ຕ້ອງການ infix ເພື່ອສະແດງຢ່າງຖືກຕ້ອງກວ່າວ່າພວກເຂົາເລີ່ມນໍາໃຊ້ຮູບແບບຢູ່ທີ່ min-width: 0ແລະບໍ່ແມ່ນຄ່າ pixels ທີ່ກໍານົດໄວ້. ແທນທີ່ຈະ .col-xs-6, ມັນແມ່ນດຽວນີ້ .col-6. ຊັ້ນຕາຂ່າຍໄຟຟ້າອື່ນໆທັງຫມົດຕ້ອງການ infix (ຕົວຢ່າງ, sm).
• ອັບເດດຂະໜາດຕາໜ່າງ, mixins, ແລະຕົວແປ.
  • gutter gutters ໃນປັດຈຸບັນມີແຜນທີ່ Sass ດັ່ງນັ້ນທ່ານສາມາດກໍານົດຄວາມກວ້າງ gutter ສະເພາະໃນແຕ່ລະ breakpoints.
  • ອັບເດດ grid mixin ເພື່ອນຳໃຊ້ make-col-readyprep mixin ແລະ a make-colເພື່ອກຳນົດ ຂະໜາດຖັນ flexແລະ max-widthສຳລັບແຕ່ລະຖັນ.
  • ປ່ຽນຈຸດແຍກການສອບຖາມສື່ຂອງລະບົບຕາໜ່າງ ແລະຄວາມກວ້າງຂອງບັນຈຸເພື່ອຄິດໄລ່ລະດັບຕາໜ່າງໃໝ່ ແລະຮັບປະກັນວ່າຖັນສາມາດແບ່ງອອກໄດ້ສະເໝີກັນໂດຍ 12ຄວາມກວ້າງສູງສຸດຂອງພວກມັນ.
  • ຕອນນີ້ຈຸດແບ່ງຕາຂ່າຍ ແລະຄວາມກວ້າງຂອງຖັງຖືກຈັດການຜ່ານແຜນທີ່ Sass ( $grid-breakpointsແລະ $container-max-widths) ແທນທີ່ຈະເປັນຕົວແປທີ່ແຍກຕ່າງຫາກຈຳນວນໜຶ່ງ. ສິ່ງເຫຼົ່ານີ້ປ່ຽນແທນ @screen-*ຕົວແປທັງໝົດ ແລະອະນຸຍາດໃຫ້ທ່ານປັບແຕ່ງຊັ້ນຕາໜ່າງໄດ້ຢ່າງສົມບູນ.
  • ການສອບຖາມສື່ຍັງມີການປ່ຽນແປງ. ແທນ​ທີ່​ຈະ​ເຮັດ​ເລ​ື້ມ​ຄືນ​ການ​ປະ​ກາດ​ການ​ສອບ​ຖາມ​ສື່​ມວນ​ຊົນ​ຂອງ​ພວກ​ເຮົາ​ທີ່​ມີ​ຄ່າ​ດຽວ​ກັນ​ໃນ​ແຕ່​ລະ​ຄັ້ງ​, ພວກ​ເຮົາ​ມີ​ໃນ​ປັດ​ຈຸ​ບັນ @include media-breakpoint-up/down/only​. ໃນປັດຈຸບັນ, ແທນທີ່ຈະຂຽນ @media (min-width: @screen-sm-min) { ... }, ທ່ານສາມາດຂຽນ @include media-breakpoint-up(sm) { ... }.

ອົງປະກອບ

• ແຖບເລື່ອນ, ຮູບຕົວຢ່າງ, ແລະນໍ້າ ສ້າງສໍາລັບອົງປະກອບທີ່ກວມເອົາທັງໝົດ, ບັດ .
• ຖິ້ມຕົວອັກສອນໄອຄອນ Glyphicons. ຖ້າທ່ານຕ້ອງການ icon, ບາງທາງເລືອກແມ່ນ:
  • ສະບັບຕົ້ນຂອງ Glyphicons
  • Octicons
  • ຕົວອັກສອນທີ່ຫນ້າຫວາດສຽວ
  • ເບິ່ງ ໜ້າຂະຫຍາຍ ສຳລັບລາຍຊື່ທາງເລືອກ. ມີຄໍາແນະນໍາເພີ່ມເຕີມບໍ? ກະລຸນາເປີດບັນຫາ ຫຼື PR.
• ຖິ້ມ plugin Affix jQuery.
  • ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ position: stickyແທນ. ເບິ່ງ HTML5 ກະລຸນາໃສ່ ລາຍລະອຽດ ແລະຄໍາແນະນໍາສະເພາະຂອງ polyfill. ຂໍ້​ສະ​ເຫນີ​ແນະ​ຫນຶ່ງ​ແມ່ນ​ການ​ນໍາ​ໃຊ້ @supports​ກົດ​ລະ​ບຽບ​ສໍາ​ລັບ​ການ​ປະ​ຕິ​ບັດ​ມັນ (ເຊັ່ນ​, @supports (position: sticky) { ... })
  • ຖ້າທ່ານກໍາລັງໃຊ້ Affix ເພື່ອນໍາໃຊ້ເພີ່ມເຕີມ, ບໍ່ແມ່ນ positionຮູບແບບ, polyfills ອາດຈະບໍ່ສະຫນັບສະຫນູນກໍລະນີການນໍາໃຊ້ຂອງທ່ານ. ທາງເລືອກຫນຶ່ງສໍາລັບການນໍາໃຊ້ດັ່ງກ່າວແມ່ນ ຫ້ອງສະຫມຸດ ScrollPos-Styler ພາກສ່ວນທີສາມ.
• ຫຼຸດລົງອົງປະກອບ pager ຍ້ອນວ່າມັນເປັນປຸ່ມປັບແຕ່ງເລັກນ້ອຍ.
• ປັບປຸງອົງປະກອບເກືອບທັງໝົດ ເພື່ອໃຊ້ຕົວເລືອກຊັ້ນຮຽນທີ່ບໍ່ໄດ້ວາງຊ້ອນກັນຫຼາຍຂຶ້ນ ແທນທີ່ຈະເປັນຕົວເລືອກເດັກນ້ອຍແບບສະເພາະເກີນ.

ໂດຍອົງປະກອບ

ບັນຊີລາຍຊື່ນີ້ຊີ້ໃຫ້ເຫັນການປ່ຽນແປງທີ່ສໍາຄັນໂດຍອົງປະກອບລະຫວ່າງ v3.xx ແລະ v4.0.0.

ປິດເປີດໃໝ່

ໃໝ່ຕໍ່ກັບ Bootstrap 4 ແມ່ນ Reboot , ຮູບແບບສີສັນໃໝ່ທີ່ສ້າງຂຶ້ນໃນ Normalize ດ້ວຍຮູບແບບການຣີເຊັດທີ່ມີຄວາມຄິດເຫັນຂອງພວກເຮົາເອງ. ຕົວເລືອກທີ່ປາກົດຢູ່ໃນໄຟລ໌ນີ້ໃຊ້ອົງປະກອບເທົ່ານັ້ນ - ບໍ່ມີຊັ້ນຮຽນຢູ່ທີ່ນີ້. ອັນນີ້ແຍກຮູບແບບການຣີເຊັດຂອງພວກເຮົາອອກຈາກຄໍເຕົ້າໄຂ່ທີ່ອົງປະກອບຂອງພວກເຮົາສໍາລັບວິທີການແບບໂມດູນຫຼາຍຂຶ້ນ. ບາງສ່ວນຂອງການປັບຄ່າທີ່ສໍາຄັນທີ່ສຸດນີ້ປະກອບມີການ box-sizing: border-boxປ່ຽນແປງ, ການເຄື່ອນຍ້າຍຈາກ emໄປຫາ remຫນ່ວຍງານໃນຫຼາຍອົງປະກອບ, ຮູບແບບການເຊື່ອມໂຍງ, ແລະຫຼາຍອົງປະກອບຂອງແບບຟອມ reset.

ຕົວພິມ

• ຍ້າຍເຄື່ອງໃຊ້ທັງໝົດ .text-ໄປໃສ່ _utilities.scssໄຟລ໌ແລ້ວ.
• ຫຼຸດລົງ .page-headerຍ້ອນວ່າຮູບແບບຂອງມັນສາມາດຖືກນໍາໄປໃຊ້ຜ່ານອຸປະກອນຕ່າງໆ.
• .dl-horizontalໄດ້ຖືກຫຼຸດລົງ. ແທນທີ່ຈະ, ໃຫ້ໃຊ້ .rowແລະ <dl>ໃຊ້ຫ້ອງຮຽນຖັນຕາຂ່າຍ (ຫຼື mixins) ໃນມັນ <dt>ແລະ <dd>ເດັກນ້ອຍ.
• ອອກແບບໃໝ່ blockquotes, ຍ້າຍຄໍເຕົ້າໄຂ່ທີ່ຂອງເຂົາເຈົ້າຈາກ <blockquote>ອົງປະກອບໄປຫາຊັ້ນດຽວ, .blockquote. ຍົກເລີກ .blockquote-reverseຕົວແກ້ໄຂສຳລັບເຄື່ອງໃຊ້ຂໍ້ຄວາມ.
• .list-inlineໃນປັດຈຸບັນຮຽກຮ້ອງໃຫ້ເດັກນ້ອຍຂອງຕົນລາຍການລາຍການມີ .list-inline-itemຫ້ອງຮຽນໃຫມ່ນໍາໃຊ້ກັບເຂົາເຈົ້າ.

ຮູບພາບ

• ປ່ຽນ​ຊື່ .img-responsive​ເປັນ .img-fluid.
• ປ່ຽນຊື່ .img-roundedເປັນ.rounded
• ປ່ຽນຊື່ .img-circleເປັນ.rounded-circle

ຕາຕະລາງ

• ເກືອບທຸກຕົວຢ່າງຂອງ >ຕົວເລືອກໄດ້ຖືກລຶບອອກແລ້ວ, ຊຶ່ງຫມາຍຄວາມວ່າຕາຕະລາງທີ່ຊ້ອນກັນໃນປັດຈຸບັນຈະສືບທອດຮູບແບບຕ່າງໆຈາກພໍ່ແມ່ຂອງພວກເຂົາໂດຍອັດຕະໂນມັດ. ອັນນີ້ເຮັດໃຫ້ຕົວເລືອກຂອງພວກເຮົາງ່າຍ ແລະ ການປັບແຕ່ງທີ່ອາດເປັນໄປໄດ້ຢ່າງຫຼວງຫຼາຍ.
• ປ່ຽນຊື່ .table-condensedເພື່ອ .table-smຄວາມສອດຄ່ອງ.
• ເພີ່ມ .table-inverseທາງເລືອກໃຫມ່.
• ເພີ່ມຕົວແກ້ໄຂສ່ວນຫົວຕາຕະລາງ: .thead-defaultແລະ .thead-inverse.
• ປ່ຽນຊື່ຫ້ອງຮຽນຕາມບໍລິບົດເພື່ອໃຫ້ມີ .table--prefix. ດັ່ງ ນັ້ນ .active, .success, .warning, .dangerແລະ , , , ແລະ ..info.table-active.table-success.table-warning.table-danger.table-info

ແບບຟອມ

• ອົງປະກອບທີ່ຖືກຍ້າຍຈະຣີເຊັດເປັນ _reboot.scssໄຟລ໌.
• ປ່ຽນ​ຊື່ .control-label​ເປັນ .col-form-label.
• ປ່ຽນຊື່ .input-lgແລະ .input-smເປັນ .form-control-lgແລະ .form-control-sm, ຕາມລໍາດັບ.
• ຫ້ອງຮຽນຖືກ ຍົກເລີກ .form-group-*ເພື່ອຄວາມລຽບງ່າຍ. ໃຊ້ .form-control-*ຫ້ອງຮຽນແທນດຽວນີ້.
• ລຸດລົງ .help-blockແລະປ່ຽນແທນດ້ວຍ .form-textຂໍ້ຄວາມຊ່ວຍເຫຼືອລະດັບບລັອກ. ສໍາລັບຂໍ້ຄວາມຊ່ວຍເຫຼືອໃນແຖວ ແລະທາງເລືອກທີ່ຍືດຫຍຸ່ນອື່ນໆ, ໃຫ້ໃຊ້ຫ້ອງຮຽນປະໂຫຍດເຊັ່ນ .text-muted.
• ຫຼຸດ​ລົງ .radio-inline​ແລະ .checkbox-inline​.
• ລວມ .checkboxແລະ .radioເຂົ້າໄປໃນ .form-checkແລະ .form-check-*ຫ້ອງຮຽນຕ່າງໆ.
• ປັບປຸງຮູບແບບແນວນອນ:
  • ຍົກເລີກ .form-horizontalຄວາມຕ້ອງການຫ້ອງຮຽນ.
  • .form-groupບໍ່ນຳໃຊ້ຮູບແບບຕ່າງໆຈາກ .rowທາງ mixin ອີກຕໍ່ໄປ, ສະນັ້ນ .rowດຽວນີ້ຈຶ່ງຕ້ອງການການຈັດວາງຕາຂ່າຍຕາມລວງນອນ (ຕົວຢ່າງ, <div class="form-group row">).
  • ເພີ່ມຄລາສໃໝ່ .col-form-labelໃສ່ປ້າຍຊື່ຢູ່ກາງແນວຕັ້ງດ້ວຍ .form-controls.
  • ເພີ່ມໃຫມ່ .form-rowສໍາລັບການຈັດຮູບແບບທີ່ຫນາແຫນ້ນກັບຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າ (ສະຫຼັບຂອງທ່ານ .rowສໍາລັບການ .form-rowແລະໄປ).
• ເພີ່ມ​ການ​ສະ​ຫນັບ​ສະ​ຫນູນ​ຮູບ​ແບບ​ກໍາ​ນົດ​ເອງ (ສໍາ​ລັບ checkboxes​, ວິ​ທະ​ຍຸ​, ເລືອກ​, ແລະ​ໄຟລ​໌​ປ້ອນ​ຂໍ້​ມູນ​)​.
• ແທນ .has-errorທີ່ , .has-warning, ແລະ .has-successຊັ້ນຮຽນທີ່ມີການກວດສອບແບບຟອມ HTML5 ຜ່ານ CSS's :invalidແລະ :validpseudo-classes.
• ປ່ຽນ​ຊື່ .form-control-static​ເປັນ .form-control-plaintext.

ປຸ່ມ

• ປ່ຽນ​ຊື່ .btn-default​ເປັນ .btn-secondary.
• ຫຼຸດລົງ .btn-xsຫ້ອງຮຽນທັງຫມົດເປັນ .btn-smອັດຕາສ່ວນຫຼາຍຂະຫນາດນ້ອຍກວ່າ v3 ຂອງ.
• ຄຸນສົມບັດ ປຸ່ມ ສະ ຖານະຂອງ button.jsplugin jQuery ໄດ້ຖືກຫຼຸດລົງ. ນີ້ປະກອບມີ ວິທີການ $().button(string)ແລະ $().button('reset')ວິທີການ. ພວກເຮົາແນະນຳໃຫ້ໃຊ້ JavaScript ແບບກຳນົດເອງເລັກນ້ອຍແທນ, ເຊິ່ງຈະມີປະໂຫຍດໃນການປະພຶດຕົວແບບທີ່ເຈົ້າຕ້ອງການ.
  • ໃຫ້ສັງເກດວ່າລັກສະນະອື່ນໆຂອງ plugin (ປຸ່ມ checkboxes, ປຸ່ມວິທະຍຸ, ປຸ່ມສະຫຼັບດຽວ) ໄດ້ຖືກເກັບຮັກສາໄວ້ໃນ v4.
• ປ່ຽນປຸ່ມ ' [disabled]ເປັນ :disabledIE9+ ຮອງ :disabledຮັບ . ແນວໃດກໍ່ຕາມ fieldset[disabled]ແມ່ນຍັງມີຄວາມຈໍາເປັນເພາະວ່າ fieldsets ທີ່ພິການພື້ນເມືອງຍັງ buggy ໃນ IE11 .

ກຸ່ມປຸ່ມ

• ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
• ລຶບອອກ .btn-group-justifiedແລ້ວ. ເປັນການທົດແທນທີ່ທ່ານສາມາດນໍາໃຊ້ <div class="btn-group d-flex" role="group"></div>ເປັນ wrapper ປະມານອົງປະກອບທີ່ມີ .w-100.
• ຫຼຸດ ລົງ .btn-group-xsຫ້ອງ ຮຽນ ໄດ້ ຮັບ ການ ໂຍກ ຍ້າຍ ທັງ ຫມົດ ຂອງ .btn-xs.
• ລຶບໄລຍະຫ່າງລະຫວ່າງກຸ່ມປຸ່ມໃນແຖບເຄື່ອງມືອອກ; ໃຊ້ປະໂຫຍດ margin ໃນປັດຈຸບັນ.
• ການປັບປຸງເອກະສານສໍາລັບການນໍາໃຊ້ກັບອົງປະກອບອື່ນໆ.

ເລື່ອນລົງ

• ປ່ຽນຈາກຕົວເລືອກຫຼັກໄປຫາຊັ້ນຮຽນເອກສຳລັບອົງປະກອບທັງໝົດ, ຕົວແກ້ໄຂ ແລະ ອື່ນໆ.
• ຮູບແບບແບບເລື່ອນລົງແບບງ່າຍດາຍເພື່ອບໍ່ໃຫ້ສົ່ງກັບລູກສອນຂຶ້ນ ຫຼືລົງລຸ່ມທີ່ຕິດກັບເມນູແບບເລື່ອນລົງ.
• ເລື່ອນລົງສາມາດສ້າງດ້ວຍ <div>s ຫຼື <ul>s ໃນປັດຈຸບັນ.
• ຮູບແບບແບບເລື່ອນລົງທີ່ສ້າງຂຶ້ນໃໝ່ ແລະເຄື່ອງໝາຍຈຸດເພື່ອໃຫ້ງ່າຍ, ຮອງຮັບໃນຕົວສຳລັບ ລາຍການແບບເລື່ອນລົງ <a>ແລະ <button>ອີງໃສ່.
• ປ່ຽນ​ຊື່ .divider​ເປັນ .dropdown-divider.
• ລາຍການແບບເລື່ອນລົງໃນປັດຈຸບັນຕ້ອງການ .dropdown-item.
• ການສະຫຼັບແບບເລື່ອນລົງບໍ່ຮຽກຮ້ອງໃຫ້ມີຄວາມຊັດເຈນອີກຕໍ່ໄປ <span class="caret"></span>; ນີ້ໄດ້ຖືກສະຫນອງໃຫ້ອັດຕະໂນມັດໂດຍຜ່ານ CSS ::afterຂອງ .dropdown-toggle.

ລະບົບຕາຂ່າຍ

• ເພີ່ມຈຸດແບ່ງ 576pxຕາໜ່າງໃໝ່ເປັນ sm, ຊຶ່ງໝາຍຄວາມວ່າຕອນນີ້ມີ 5 ຊັ້ນທັງໝົດ ( xs, sm, md, lg, ແລະ xl).
• ປ່ຽນຊື່ຫ້ອງຮຽນຕົວແກ້ໄຂຕາໜ່າງທີ່ຕອບສະໜອງໄດ້ຈາກ .col-{breakpoint}-{modifier}-{size}ໄປຫາ .{modifier}-{breakpoint}-{size}ຫ້ອງຮຽນຕາໜ່າງທີ່ງ່າຍກວ່າ.
• ຫຼຸດລົງແລະດຶງຫ້ອງຮຽນ modifier ສໍາລັບຫ້ອງຮຽນໃຫມ່ flexbox-powered order. ຕົວຢ່າງ, ແທນທີ່ຈະ .col-8.push-4ແລະ .col-4.pull-8, ເຈົ້າຈະໃຊ້ .col-8.order-2ແລະ .col-4.order-1.
• ເພີ່ມຫ້ອງຮຽນຜົນປະໂຫຍດ flexbox ສໍາລັບລະບົບຕາຂ່າຍໄຟຟ້າແລະອົງປະກອບ.

ລາຍຊື່ກຸ່ມ

• ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
• ແທນ a.list-group-itemທີ່ດ້ວຍຫ້ອງຮຽນທີ່ຊັດເຈນ, .list-group-item-action, ສໍາລັບການເຊື່ອມຕໍ່ຄໍເຕົ້າໄຂ່ທີ່ແລະສະບັບປຸ່ມຂອງລາຍການກຸ່ມລາຍການ.
• ເພີ່ມ .list-group-flushຫ້ອງຮຽນເພື່ອໃຊ້ກັບບັດ.

Modal

• ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
• ເນື່ອງຈາກການຍ້າຍໄປ flexbox, ການຈັດວາງຂອງໄອຄອນປິດຢູ່ໃນສ່ວນຫົວແມ່ນອາດຈະແຕກຫັກຍ້ອນວ່າພວກເຮົາບໍ່ໄດ້ໃຊ້ floats ອີກຕໍ່ໄປ. ເນື້ອຫາທີ່ເລື່ອນໄດ້ມາກ່ອນ, ແຕ່ກັບ flexbox ນັ້ນບໍ່ແມ່ນກໍລະນີ. ອັບເດດໄອຄອນການປິດຂອງທ່ານທີ່ຈະມາຫຼັງຈາກຫົວຂໍ້ modal ເພື່ອແກ້ໄຂ.
• ທາງ remoteເລືອກ (ເຊິ່ງສາມາດຖືກນໍາໃຊ້ເພື່ອອັດຕະໂນມັດໂຫຼດແລະໃສ່ເນື້ອໃນພາຍນອກເຂົ້າໄປໃນ modal) ແລະເຫດການທີ່ສອດຄ້ອງກັນ loaded.bs.modalໄດ້ຖືກໂຍກຍ້າຍອອກ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ແມ່ແບບຂ້າງລູກຄ້າຫຼືກອບການຜູກມັດຂໍ້ມູນ, ຫຼືໂທ ຫາ jQuery.load ຕົວທ່ານເອງ.

ກອງທັບເຮືອ

• ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
• ຫຼຸດຕົວເລືອກເກືອບທັງໝົດ >ສຳລັບການແຕ່ງຕົວທີ່ງ່າຍກວ່າຜ່ານຊັ້ນຮຽນທີ່ບໍ່ຕິດກັນ.
• ແທນທີ່ຈະເປັນຕົວເລືອກສະເພາະ HTML ເຊັ່ນ .nav > li > a, ພວກເຮົາໃຊ້ຫ້ອງຮຽນແຍກຕ່າງຫາກສໍາລັບ .navs, .nav-items, ແລະ .nav-links. ນີ້ເຮັດໃຫ້ HTML ຂອງທ່ານມີຄວາມຍືດຫຍຸ່ນຫຼາຍໃນຂະນະທີ່ນໍາເອົາການຂະຫຍາຍທີ່ເພີ່ມຂຶ້ນ.

Navbar

ແຖບ navbar ໄດ້ຖືກຂຽນຄືນໃຫມ່ທັງຫມົດໃນ flexbox ດ້ວຍການປັບປຸງການສະຫນັບສະຫນູນສໍາລັບການສອດຄ່ອງ, ການຕອບສະຫນອງແລະການປັບແຕ່ງ.

• ພຶດຕິກໍາການນໍາທາງທີ່ຕອບສະຫນອງໃນປັດຈຸບັນຖືກນໍາໃຊ້ກັບ .navbarຊັ້ນຮຽນໂດຍຜ່ານຄວາມ ຕ້ອງການ .navbar-expand-{breakpoint} ທີ່ທ່ານເລືອກບ່ອນທີ່ຈະຫຍໍ້ navbar. ກ່ອນຫນ້ານີ້, ນີ້ແມ່ນການປ່ຽນແປງທີ່ມີການປ່ຽນແປງຫນ້ອຍແລະຕ້ອງການການລວບລວມຄືນໃຫມ່.
• .navbar-defaultໃນປັດຈຸບັນ .navbar-light, ເຖິງແມ່ນວ່າ .navbar-darkຍັງຄົງຢູ່ຄືກັນ. ນຶ່ງໃນນັ້ນແມ່ນຕ້ອງການຢູ່ໃນແຖບ navbar ແຕ່ລະຄົນ. ຢ່າງໃດກໍຕາມ, ຫ້ອງຮຽນເຫຼົ່ານີ້ບໍ່ໄດ້ກໍານົດ background-colors; ແທນທີ່ຈະ, ພວກເຂົາເຈົ້າພຽງແຕ່ມີຜົນກະທົບ color.
• ດຽວນີ້ Navbars ຕ້ອງການການປະກາດພື້ນຖານຂອງບາງປະເພດ. ເລືອກ​ຈາກ​ອຸ​ປະ​ກອນ​ພື້ນ​ຖານ​ຂອງ​ພວກ​ເຮົາ ( .bg-*) ຫຼື​ຕັ້ງ​ຂອງ​ທ່ານ​ເອງ​ກັບ​ຫ້ອງ​ຮຽນ​ແສງ​ສະ​ຫວ່າງ / inverse ຂ້າງ​ເທິງ​ນີ້ ​ສໍາ​ລັບ​ການ​ປັບ​ແຕ່ງ​ເປັນ​ບ້າ .
• ໂດຍໃຫ້ຮູບແບບ flexbox, navbars ດຽວນີ້ສາມາດໃຊ້ flexbox utilities ສໍາລັບທາງເລືອກການຈັດຕໍາແຫນ່ງທີ່ງ່າຍດາຍ.
• .navbar-toggleແມ່ນໃນປັດຈຸບັນ .navbar-togglerແລະມີຮູບແບບທີ່ແຕກຕ່າງກັນແລະເຄື່ອງຫມາຍພາຍໃນ (ບໍ່ມີສາມ <span>s).
• ເລີກ .navbar-formຮຽນໝົດ. ມັນບໍ່ຈໍາເປັນອີກຕໍ່ໄປ; ແທນທີ່ຈະ, ພຽງແຕ່ໃຊ້ .form-inlineແລະນໍາໃຊ້ຜົນປະໂຫຍດຂອບຕາມຄວາມຈໍາເປັນ.
• Navbars ບໍ່ລວມ margin-bottomຫຼື border-radiusໂດຍຄ່າເລີ່ມຕົ້ນ. ໃຊ້ເຄື່ອງໃຊ້ຕ່າງໆຕາມຄວາມຈໍາເປັນ.
• ຕົວຢ່າງທັງຫມົດທີ່ມີ navbars ໄດ້ຖືກປັບປຸງເພື່ອປະກອບມີເຄື່ອງຫມາຍໃຫມ່.

Pagination

• ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
• ຫ້ອງຮຽນທີ່ຊັດເຈນ ( .page-item, .page-link) ແມ່ນຕ້ອງການຢູ່ໃນລູກຫລານຂອງ .paginations
• ຫຼຸດລົງ .pagerອົງປະກອບທັງຫມົດຍ້ອນວ່າມັນແມ່ນຫຼາຍກ່ວາປຸ່ມກໍານົດເອງເລັກນ້ອຍ.

ເຂົ້າໜົມປັງ

• ຫ້ອງຮຽນທີ່ຊັດເຈນ .breadcrumb-item, ປະຈຸບັນແມ່ນຕ້ອງການກ່ຽວກັບລູກຫລານຂອງ .breadcrumbs

ປ້າຍ ແລະປ້າຍ

• ສັງລວມ .labelແລະ .badgedisambiguate ຈາກ <label>ອົງປະກອບແລະງ່າຍອົງປະກອບທີ່ກ່ຽວຂ້ອງ.
• ເພີ່ມ .badge-pillເປັນຕົວແກ້ໄຂສໍາລັບຮູບຊົງ "ເມັດ" ມົນ.
• ປ້າຍບໍ່ຖືກເລື່ອນໂດຍອັດຕະໂນມັດໃນກຸ່ມລາຍຊື່ ແລະອົງປະກອບອື່ນໆ. ຫ້ອງຮຽນຜົນປະໂຫຍດໃນປັດຈຸບັນແມ່ນຕ້ອງການສໍາລັບການນັ້ນ.
• .badge-defaultໄດ້ຖືກລຸດລົງ ແລະ .badge-secondaryຖືກເພີ່ມເຂົ້າກັບຫ້ອງຮຽນຕົວແກ້ໄຂອົງປະກອບທີ່ໃຊ້ຢູ່ບ່ອນອື່ນ.

ແຜງ, ຮູບຕົວຢ່າງ, ແລະນໍ້າສ້າງ

ຫຼຸດລົງທັງຫມົດສໍາລັບອົງປະກອບບັດໃຫມ່.

ແຜງ

• .panelເຖິງ .card, ປະຈຸບັນກໍ່ສ້າງດ້ວຍ flexbox.
• .panel-defaultເອົາອອກແລະບໍ່ມີການທົດແທນ.
• .panel-groupເອົາອອກແລະບໍ່ມີການທົດແທນ. .card-groupບໍ່ແມ່ນການທົດແທນ, ມັນແຕກຕ່າງກັນ.
• .panel-headingກັບ.card-header
• .panel-titleກັບ .card-title. ອີງຕາມການເບິ່ງທີ່ຕ້ອງການ, ທ່ານອາດຈະຕ້ອງການໃຊ້ ອົງປະກອບຫົວຂໍ້ຫຼືຊັ້ນຮຽນ (ເຊັ່ນ: <h3>, .h3) ຫຼືອົງປະກອບທີ່ກ້າຫານ (ຕົວຢ່າງ <strong>, <b>, .font-weight-bold). ໃຫ້ສັງເກດວ່າ .card-title, ໃນຂະນະທີ່ມີຊື່ຄ້າຍຄືກັນ, ຜະລິດລັກສະນະທີ່ແຕກຕ່າງຈາກ .panel-title.
• .panel-bodyກັບ.card-body
• .panel-footerກັບ.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ແລະ .panel-dangerໄດ້ຖືກຫຼຸດລົງສໍາລັບ .bg-, .text-, ແລະ .borderຜົນປະໂຫຍດທີ່ສ້າງຂຶ້ນຈາກ $theme-colorsແຜນທີ່ Sass ຂອງພວກເຮົາ.

ຄວາມຄືບໜ້າ

• ແທນ .progress-bar-*ທີ່ຫ້ອງຮຽນຕາມບໍລິບົດດ້ວຍ .bg-*ຜົນປະໂຫຍດ. ສໍາລັບຕົວຢ່າງ, class="progress-bar progress-bar-danger"ກາຍເປັນ class="progress-bar bg-danger".
• ແທນ .activeທີ່ແຖບຄວາມຄືບໜ້າແບບເຄື່ອນໄຫວດ້ວຍ .progress-bar-animated.

Carousel

• ປັບປຸງອົງປະກອບທັງໝົດເພື່ອເຮັດໃຫ້ການອອກແບບ ແລະການຈັດຮູບແບບງ່າຍຂຶ້ນ. ພວກ​ເຮົາ​ມີ​ຮູບ​ແບບ​ຫນ້ອຍ​ສໍາ​ລັບ​ທ່ານ​ທີ່​ຈະ​ລົບ​ລ້າງ​, ຕົວ​ຊີ້​ວັດ​ໃຫມ່​, ແລະ​ໄອ​ຄອນ​ໃຫມ່​.
• CSS ທັງໝົດບໍ່ໄດ້ຖືກຕັ້ງ ແລະປ່ຽນຊື່, ຮັບປະກັນວ່າແຕ່ລະຊັ້ນຈະຖືກນຳໜ້າດ້ວຍ .carousel-.
  • ສໍາລັບລາຍການ carousel, .next, .prev, .left, ແລະ .rightໃນປັດຈຸບັນ .carousel-item-next, .carousel-item-prev, .carousel-item-left, ແລະ .carousel-item-right.
  • .itemດຽວນີ້ .carousel-item.
  • ສໍາລັບການຄວບຄຸມກ່ອນ / ຕໍ່ໄປ, .carousel-control.rightແລະ .carousel-control.leftໃນປັດຈຸບັນ .carousel-control-nextແລະ .carousel-control-prev, ຊຶ່ງຫມາຍຄວາມວ່າພວກເຂົາບໍ່ຕ້ອງການຊັ້ນພື້ນຖານສະເພາະ.
• ຖອດຄໍເຕົ້າໄຂ່ທີ່ຕອບສະໜອງທັງໝົດອອກ, ເລື່ອນໄປໃສ່ເຄື່ອງໃຊ້ຕ່າງໆ (ເຊັ່ນ: ສະແດງຄຳບັນຍາຍໃນບາງຊ່ອງເບິ່ງ) ແລະຮູບແບບທີ່ກຳນົດເອງຕາມຄວາມຕ້ອງການ.
• ການລົບລ້າງຮູບພາບທີ່ຖືກລົບອອກສໍາລັບຮູບພາບໃນລາຍການ carousel, ເລື່ອນໄປຫາຜົນປະໂຫຍດ.
• ປັບປ່ຽນຕົວຢ່າງ Carousel ເພື່ອລວມເອົາເຄື່ອງໝາຍ ແລະຮູບແບບສີສັນໃໝ່.

ຕາຕະລາງ

• ຖອດການຮອງຮັບຕາຕະລາງທີ່ຕິດສະໄຕລ໌ອອກແລ້ວ. ຮູບແບບຕາຕະລາງທັງໝົດແມ່ນໄດ້ຮັບການສືບທອດໃນ v4 ສໍາລັບຕົວເລືອກທີ່ງ່າຍກວ່າ.
• ເພີ່ມຕົວແປຕາຕະລາງປີ້ນກັນແລ້ວ.

ອຸປະໂພກ

• ສະແດງ, ເຊື່ອງໄວ້, ແລະອື່ນໆອີກ:
  • ເຮັດ​ໃຫ້​ອຸ​ປະ​ກອນ​ການ​ສະ​ແດງ​ຜົນ​ຕອບ​ສະ​ຫນອງ (ເຊັ່ນ​, .d-noneແລະ d-{sm,md,lg,xl}-none)​.
  • ຫຼຸດ​ລົງ​ສ່ວນ​ໃຫຍ່​ຂອງ​ອຸ .hidden-*​ປະ​ກອນ​ສໍາ​ລັບ ​ອຸ​ປະ​ກອນ​ການ ​ສະ​ແດງ​ຜົນ ​ໃຫມ່ ​. ຕົວຢ່າງ, ແທນທີ່ຈະ .hidden-sm-up, ໃຊ້ .d-sm-none. ປ່ຽນຊື່ເຄື່ອງ .hidden-printໃຊ້ເພື່ອໃຊ້ລະບົບການຕັ້ງຊື່ຂອງການສະແດງຜົນ. ຂໍ້ມູນເພີ່ມເຕີມພາຍໃຕ້ຫົວຂໍ້ Responsive Utilities ຂອງໜ້ານີ້.
  • ເພີ່ມ .float-{sm,md,lg,xl}-{left,right,none}ຫ້ອງຮຽນສໍາລັບ floats ຕອບສະຫນອງແລະເອົາອອກ .pull-leftແລະ .pull-rightເນື່ອງຈາກວ່າພວກເຂົາເຈົ້າກໍາລັງຊ້ໍາຊ້ອນກັບ .float-leftແລະ .float-right.
• ປະເພດ:
  • ເພີ່ມການປ່ຽນແປງທີ່ຕອບສະໜອງໃຫ້ກັບຫ້ອງຮຽນການຈັດຮຽງຂໍ້ຄວາມຂອງພວກເຮົາ .text-{sm,md,lg,xl}-{left,center,right}.
• ຈັດຮຽງ ແລະໄລຍະຫ່າງ:
  • ເພີ່ມ ຂອບການຕອບສະ ໜອງ ໃໝ່ ແລະເຄື່ອງໃຊ້ຜ້າປູພື້ນ ສໍາລັບທຸກດ້ານ, ບວກກັບສັ້ນແນວຕັ້ງແລະແນວນອນ.
  • ເພີ່ມ boatload ຂອງ flexbox utilities .
  • ເລື່ອນ ຊັ້ນຮຽນ .center-blockໃໝ່ .mx-auto.
• Clearfix ອັບເດດເພື່ອລຸດລົງການຮອງຮັບຂອງບຣາວເຊີເວີຊັ່ນເກົ່າ.

ຕົວແທນຈຳໜ່າຍຄຳນຳໜ້າ mixins

mixins ຄໍານໍາຫນ້າຂອງ ຜູ້ຂາຍ Bootstrap 3 , ເຊິ່ງຖືກຍົກເລີກໃນ v3.2.0, ໄດ້ຖືກລຶບອອກໃນ Bootstrap 4. ເນື່ອງຈາກພວກເຮົາໃຊ້ Autoprefixer , ພວກມັນບໍ່ຈໍາເປັນອີກຕໍ່ໄປ.

ເອົາເຄື່ອງປະສົມຕໍ່ໄປນີ້ອອກແລ້ວ: animation, animation-delay, , animation-direction, animation-duration, , animation-fill-mode, animation-iteration-count, , animation-name, animation-timing-function, , backface-visibility, , box-sizing, content-columns, , hyphens, opacity, , perspective, , perspective-origin, , rotate, rotateX, , rotateY, , scale, , scaleX, , scaleY, skew, , transform-origin, , transition-delay, transition-duration, , transition-property, , , transition-timing-function, transition-transform, translate, translate3d,user-select

ເອກະສານ

ເອກະສານຂອງພວກເຮົາໄດ້ຮັບການຍົກລະດັບໃນທົ່ວຄະນະເຊັ່ນດຽວກັນ. ນີ້ແມ່ນຈຸດຕໍ່າສຸດ:

• ພວກເຮົາຍັງໃຊ້ Jekyll, ແຕ່ພວກເຮົາມີ plugins ໃນການປະສົມ:
  • bugify.rbຖືກນໍາໃຊ້ເພື່ອສະແດງລາຍການລາຍການຢູ່ໃນ ຫນ້າ ແມງໄມ້ ຂອງພວກເຮົາຢ່າງມີປະສິດທິພາບ .
  • example.rbເປັນສ້ອມທີ່ກຳນົດເອງຂອງ highlight.rbplugin ເລີ່ມຕົ້ນ, ຊ່ວຍໃຫ້ການຈັດການລະຫັດຕົວຢ່າງງ່າຍຂຶ້ນ.
  • callout.rbເປັນສ້ອມແບບກຳນົດເອງທີ່ຄ້າຍຄືກັນຂອງສິ່ງນັ້ນ, ແຕ່ອອກແບບມາເພື່ອການເອີ້ນເອກະສານພິເສດຂອງພວກເຮົາ.
  • jekyll-toc ຖືກນໍາໃຊ້ເພື່ອສ້າງຕາຕະລາງເນື້ອໃນຂອງພວກເຮົາ.
• ເນື້ອໃນເອກະສານທັງໝົດໄດ້ຖືກຂຽນຄືນໃໝ່ໃນ Markdown (ແທນ HTML) ເພື່ອແກ້ໄຂໄດ້ງ່າຍຂຶ້ນ.
• ຫນ້າເວັບໄດ້ຖືກຈັດລຽງໃຫມ່ສໍາລັບເນື້ອຫາທີ່ງ່າຍດາຍແລະລໍາດັບຊັ້ນທີ່ເຂົ້າຫາໄດ້ຫຼາຍຂຶ້ນ.
• ພວກເຮົາໄດ້ຍ້າຍຈາກ CSS ປົກກະຕິໄປຫາ SCSS ເພື່ອໃຊ້ປະໂຫຍດຢ່າງເຕັມທີ່ຈາກຕົວແປຂອງ Bootstrap, mixins, ແລະອື່ນໆ.

ອຸປະຖໍາທີ່ຕອບສະຫນອງ

ຕົວແປ ທັງໝົດ @screen-ໄດ້ຖືກລຶບອອກໃນ v4.0.0. ໃຊ້ media-breakpoint-up(), media-breakpoint-down(), ຫຼື media-breakpoint-only()Sass mixins ຫຼື $grid-breakpointsແຜນທີ່ Sass ແທນ.

ຫ້ອງຮຽນສາທາລະນຸປະໂພກທີ່ຕອບສະໜອງຂອງພວກເຮົາສ່ວນໃຫຍ່ໄດ້ຖືກໂຍກຍ້າຍອອກໃນເງື່ອນໄຂຂອງຜົນ displayປະໂຫຍດທີ່ຊັດເຈນ.

• ຊັ້ນ .hiddenຮຽນ .showໄດ້ຖືກໂຍກຍ້າຍອອກເພາະວ່າພວກເຂົາຂັດແຍ້ງກັບ jQuery $(...).hide()ແລະ $(...).show()ວິທີການ. ແທນທີ່ຈະ, ລອງສະຫຼັບ [hidden]ຄຸນສົມບັດ ຫຼືໃຊ້ຮູບແບບໃນແຖວເຊັ່ນ style="display: none;"ແລະ style="display: block;".
• ຊັ້ນຮຽນ ທັງຫມົດ .hidden-ໄດ້ຖືກໂຍກຍ້າຍອອກ, ຊ່ວຍປະຢັດສໍາລັບເຄື່ອງພິມທີ່ໄດ້ຖືກປ່ຽນຊື່.
  • ລຶບອອກຈາກ v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • ລຶບອອກຈາກ v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ເຄື່ອງມືການພິມບໍ່ໄດ້ເລີ່ມຕົ້ນດ້ວຍ .hidden-ຫຼື .visible-, ແຕ່ດ້ວຍ .d-print-.
  • ຊື່ເກົ່າ: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • ຫ້ອງຮຽນໃໝ່: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

ແທນທີ່ຈະໃຊ້ .visible-*ຫ້ອງຮຽນທີ່ຊັດເຈນ, ທ່ານເຮັດໃຫ້ອົງປະກອບທີ່ເຫັນໄດ້ໂດຍພຽງແຕ່ບໍ່ເຊື່ອງມັນຢູ່ໃນຂະຫນາດຫນ້າຈໍນັ້ນ. ທ່ານສາມາດສົມທົບຫນຶ່ງ .d-*-noneຫ້ອງຮຽນກັບຫນຶ່ງ .d-*-blockຫ້ອງຮຽນເພື່ອສະແດງອົງປະກອບພຽງແຕ່ໃນໄລຍະຫ່າງຂອງຂະຫນາດຫນ້າຈໍ (ເຊັ່ນ: .d-none.d-md-block.d-xl-noneສະແດງອົງປະກອບພຽງແຕ່ໃນອຸປະກອນຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່).

ໃຫ້ສັງເກດວ່າການປ່ຽນແປງຂອງຈຸດແບ່ງຕາຂ່າຍໄຟຟ້າໃນ v4 ຫມາຍຄວາມວ່າທ່ານຈະຕ້ອງໄປຫາຈຸດແບ່ງຂັ້ນຫນຶ່ງທີ່ໃຫຍ່ກວ່າເພື່ອບັນລຸຜົນໄດ້ຮັບດຽວກັນ. ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ຕອບສະຫນອງໃຫມ່ບໍ່ພະຍາຍາມທີ່ຈະຮອງຮັບກໍລະນີທີ່ພົບເລື້ອຍຫນ້ອຍທີ່ການເບິ່ງເຫັນຂອງອົງປະກອບບໍ່ສາມາດສະແດງອອກເປັນຂອບເຂດທີ່ຕິດຕໍ່ກັນຂອງຂະຫນາດ viewport; ແທນທີ່ເຈົ້າຈະຕ້ອງໃຊ້ CSS ແບບກຳນົດເອງໃນກໍລະນີດັ່ງກ່າວ.