ການເຄື່ອນຍ້າຍໄປ v4
Bootstrap 4 ແມ່ນການຂຽນຄືນໃຫມ່ທີ່ສໍາຄັນຂອງໂຄງການທັງຫມົດ. ການປ່ຽນແປງທີ່ໂດດເດັ່ນທີ່ສຸດແມ່ນໄດ້ສະຫຼຸບຂ້າງລຸ່ມນີ້, ຕິດຕາມມາດ້ວຍການປ່ຽນແປງສະເພາະເພີ່ມເຕີມຕໍ່ກັບອົງປະກອບທີ່ກ່ຽວຂ້ອງ.
ການເຄື່ອນຍ້າຍຈາກ Beta 3 ໄປສູ່ການປ່ອຍ v4.0 ທີ່ຫມັ້ນຄົງຂອງພວກເຮົາ, ບໍ່ມີການປ່ຽນແປງທີ່ແຕກຫັກ, ແຕ່ມີບາງການປ່ຽນແປງທີ່ໂດດເດັ່ນ.
-
ແກ້ໄຂເຄື່ອງພິມທີ່ແຕກຫັກ. ກ່ອນຫນ້ານີ້, ການໃຊ້
.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
.
ໃນຂະນະທີ່ 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-image
s ໃນ 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
ແລະບໍ່ແມ່ນອົງປະກອບຂອງຮູບແບບສ່ວນບຸກຄົນ.
ໃນຂະນະທີ່ຢູ່ໃນເບຕ້າ, ພວກເຮົາມີຈຸດປະສົງທີ່ຈະບໍ່ມີການປ່ຽນແປງທີ່ແຕກຫັກ. ຢ່າງໃດກໍຕາມ, ສິ່ງຕ່າງໆບໍ່ສະເຫມີໄປຕາມແຜນການ. ຂ້າງລຸ່ມນີ້ແມ່ນການປ່ຽນແປງທີ່ແຕກຫັກທີ່ຕ້ອງຈື່ໄວ້ເມື່ອຍ້າຍຈາກ 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). xs
grid classes ໄດ້ຖືກດັດແກ້ເພື່ອບໍ່ຕ້ອງການ infix ເພື່ອສະແດງຢ່າງຖືກຕ້ອງກວ່າວ່າພວກເຂົາເລີ່ມນໍາໃຊ້ຮູບແບບຢູ່ທີ່min-width: 0
ແລະບໍ່ແມ່ນຄ່າ pixels ທີ່ກໍານົດໄວ້. ແທນທີ່ຈະ.col-xs-6
, ມັນແມ່ນດຽວນີ້.col-6
. ຊັ້ນຕາຂ່າຍໄຟຟ້າອື່ນໆທັງໝົດຕ້ອງການ infix (ຕົວຢ່າງ,sm
).
- ໄດ້ເພີ່ມ
- ອັບເດດຂະໜາດຕາໜ່າງ, mixins, ແລະຕົວແປ.
- gutter gutters ໃນປັດຈຸບັນມີແຜນທີ່ Sass ດັ່ງນັ້ນທ່ານສາມາດກໍານົດຄວາມກວ້າງ gutter ສະເພາະໃນແຕ່ລະ breakpoints.
- ອັບເດດຕາຕະລາງ mixins ເພື່ອໃຊ້
make-col-ready
prep mixin ແລະ amake-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>
ເດັກນ້ອຍ.- ການຈັດຮູບແບບແບບ ກຳນົດເອງ
<blockquote>
ໄດ້ຍ້າຍໄປຢູ່ໃນຊັ້ນຮຽນ.blockquote
ແລະ.blockquote-reverse
ຕົວແກ້ໄຂ. .list-inline
ໃນປັດຈຸບັນຮຽກຮ້ອງໃຫ້ເດັກນ້ອຍຂອງຕົນລາຍການລາຍການມີ.list-inline-item
ຫ້ອງຮຽນໃຫມ່ນໍາໃຊ້ກັບເຂົາເຈົ້າ.
- ປ່ຽນຊື່
.img-responsive
ເປັນ.img-fluid
. - ປ່ຽນຊື່
.img-rounded
ເປັນ.rounded
- ປ່ຽນຊື່
.img-circle
ເປັນ.rounded-circle
- ເກືອບທຸກຕົວຢ່າງຂອງ
>
ຕົວເລືອກໄດ້ຖືກລຶບອອກແລ້ວ, ຊຶ່ງຫມາຍຄວາມວ່າຕາຕະລາງທີ່ຊ້ອນກັນໃນປັດຈຸບັນຈະສືບທອດຮູບແບບຕ່າງໆຈາກພໍ່ແມ່ຂອງພວກເຂົາໂດຍອັດຕະໂນມັດ. ອັນນີ້ເຮັດໃຫ້ຕົວເລືອກຂອງພວກເຮົາງ່າຍຂຶ້ນ ແລະ ການປັບແຕ່ງທີ່ອາດເປັນໄປໄດ້. - ຕາຕະລາງທີ່ຕອບສະໜອງບໍ່ຈຳເປັນຕ້ອງມີອົງປະກອບການຫໍ່ອີກຕໍ່ໄປ. ແທນທີ່ຈະ, ພຽງແຕ່ໃສ່
.table-responsive
ສິດທິໃນ<table>
. - ປ່ຽນຊື່
.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-control
s. - ເພີ່ມໃຫມ່
.form-row
ສໍາລັບການຈັດຮູບແບບທີ່ຫນາແຫນ້ນກັບຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າ ( ສະຫຼັບຂອງ.row
ເຈົ້າເປັນ.form-row
ແລະໄປ).
- ຍົກເລີກ
- ເພີ່ມການສະຫນັບສະຫນູນຮູບແບບກໍານົດເອງ (ສໍາລັບ checkboxes, ວິທະຍຸ, ເລືອກ, ແລະໄຟລ໌ປ້ອນຂໍ້ມູນ).
- ແທນ
.has-error
ທີ່ ,.has-warning
, ແລະ.has-success
ຊັ້ນຮຽນທີ່ມີການກວດສອບແບບຟອມ HTML5 ຜ່ານ CSS's:invalid
ແລະ:valid
pseudo-classes. - ປ່ຽນຊື່
.form-control-static
ເປັນ.form-control-plaintext
.
- ປ່ຽນຊື່
.btn-default
ເປັນ.btn-secondary
. - ຫຼຸດລົງ
.btn-xs
ຫ້ອງຮຽນທັງຫມົດເປັນ.btn-sm
ອັດຕາສ່ວນຫຼາຍຂະຫນາດນ້ອຍກວ່າ v3 ຂອງ. - ຄຸນສົມບັດ ປຸ່ມລັດ ຂອງ
button.js
plugin jQuery ໄດ້ຖືກຫຼຸດລົງ. ນີ້ປະກອບມີ ວິທີການ$().button(string)
ແລະ$().button('reset')
ວິທີການ. ພວກເຮົາແນະນຳໃຫ້ໃຊ້ JavaScript ແບບກຳນົດເອງເລັກນ້ອຍແທນ, ເຊິ່ງຈະມີປະໂຫຍດໃນການປະພຶດຕົວແບບທີ່ເຈົ້າຕ້ອງການ.- ໃຫ້ສັງເກດວ່າລັກສະນະອື່ນໆຂອງ plugin (ປຸ່ມ checkboxes, ປຸ່ມວິທະຍຸ, ປຸ່ມສະຫຼັບດຽວ) ໄດ້ຖືກເກັບຮັກສາໄວ້ໃນ v4.
- ປ່ຽນປຸ່ມ '
[disabled]
ເປັນ:disabled
IE9+ ຮອງ: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}
ຫ້ອງຮຽນຕາໜ່າງທີ່ງ່າຍກວ່າ. - ຫຼຸດລົງແລະດຶງຫ້ອງຮຽນຕົວດັດແປງສໍາລັບຫ້ອງຮຽນໃຫມ່ທີ່ໃຊ້ flexbox
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
ຫ້ອງຮຽນເພື່ອໃຊ້ກັບບັດ.
- ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
- ເນື່ອງຈາກການຍ້າຍໄປ flexbox, ການຈັດວາງຂອງໄອຄອນປິດຢູ່ໃນສ່ວນຫົວແມ່ນອາດຈະແຕກຫັກຍ້ອນວ່າພວກເຮົາບໍ່ໄດ້ໃຊ້ floats ອີກຕໍ່ໄປ. ເນື້ອຫາທີ່ເລື່ອນໄດ້ມາກ່ອນ, ແຕ່ກັບ flexbox ນັ້ນບໍ່ແມ່ນກໍລະນີ. ອັບເດດໄອຄອນການປິດຂອງທ່ານທີ່ຈະມາຫຼັງຈາກຫົວຂໍ້ modal ເພື່ອແກ້ໄຂ.
- ທາງ
remote
ເລືອກ (ຊຶ່ງສາມາດຖືກນໍາໃຊ້ເພື່ອອັດຕະໂນມັດໂຫຼດແລະໃສ່ເນື້ອໃນພາຍນອກເຂົ້າໄປໃນ modal) ແລະເຫດການທີ່ສອດຄ້ອງກັນloaded.bs.modal
ໄດ້ຖືກໂຍກຍ້າຍອອກ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ແມ່ແບບຂ້າງລູກຄ້າຫຼືກອບການຜູກມັດຂໍ້ມູນ, ຫຼືໂທ ຫາ jQuery.load ຕົວທ່ານເອງ.
- ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
- ຫຼຸດຕົວເລືອກເກືອບທັງໝົດ
>
ສຳລັບການແຕ່ງຕົວທີ່ງ່າຍກວ່າຜ່ານຊັ້ນຮຽນທີ່ບໍ່ຕິດກັນ. - ແທນທີ່ຈະເປັນຕົວເລືອກສະເພາະ HTML ເຊັ່ນ
.nav > li > a
, ພວກເຮົາໃຊ້ຫ້ອງຮຽນແຍກຕ່າງຫາກສໍາລັບ.nav
s,.nav-item
s, ແລະ.nav-link
s. ນີ້ເຮັດໃຫ້ HTML ຂອງທ່ານມີຄວາມຍືດຫຍຸ່ນຫຼາຍໃນຂະນະທີ່ນໍາເອົາການຂະຫຍາຍທີ່ເພີ່ມຂຶ້ນ.
ແຖບ navbar ໄດ້ຖືກຂຽນຄືນໃຫມ່ທັງຫມົດໃນ flexbox ດ້ວຍການປັບປຸງການສະຫນັບສະຫນູນສໍາລັບການສອດຄ່ອງ, ການຕອບສະຫນອງແລະການປັບແຕ່ງ.
- ພຶດຕິກຳການນຳທາງທີ່ຕອບສະໜອງໄດ້ຕອນນີ້ຖືກນຳໃຊ້ກັບ
.navbar
ຊັ້ນຮຽນຜ່ານ ບ່ອນທີ່ທ່ານ ຕ້ອງການ.navbar-expand-{breakpoint}
ເລືອກບ່ອນທີ່ຈະຫຍໍ້ແຖບນຳທາງ. ກ່ອນຫນ້ານີ້, ນີ້ແມ່ນການປ່ຽນແປງທີ່ມີການປ່ຽນແປງຫນ້ອຍແລະຕ້ອງການການລວບລວມຄືນໃຫມ່. .navbar-default
ໃນປັດຈຸບັນ.navbar-light
, ເຖິງແມ່ນວ່າ.navbar-dark
ຍັງຄົງຢູ່ຄືກັນ. ນຶ່ງໃນນັ້ນແມ່ນຕ້ອງການຢູ່ໃນແຖບ navbar ແຕ່ລະຄົນ. ຢ່າງໃດກໍຕາມ, ຫ້ອງຮຽນເຫຼົ່ານີ້ບໍ່ໄດ້ກໍານົດbackground-color
s; ແທນທີ່ຈະ, ພວກເຂົາເຈົ້າພຽງແຕ່ມີຜົນກະທົບcolor
.- ດຽວນີ້ Navbars ຕ້ອງການການປະກາດພື້ນຖານຂອງບາງປະເພດ. ເລືອກຈາກອຸປະກອນພື້ນຖານຂອງພວກເຮົາ (
.bg-*
) ຫຼືຕັ້ງຂອງທ່ານເອງກັບຫ້ອງຮຽນແສງສະຫວ່າງ / inverse ຂ້າງເທິງນີ້ ສໍາລັບການປັບແຕ່ງເປັນບ້າ . - ໂດຍໃຫ້ຮູບແບບ flexbox, navbars ດຽວນີ້ສາມາດໃຊ້ flexbox utilities ສໍາລັບທາງເລືອກການຈັດຕໍາແຫນ່ງທີ່ງ່າຍດາຍ.
.navbar-toggle
ແມ່ນໃນປັດຈຸບັນ.navbar-toggler
ແລະມີຮູບແບບທີ່ແຕກຕ່າງກັນແລະເຄື່ອງຫມາຍພາຍໃນ (ບໍ່ມີອີກສາມ<span>
s).- ເລີກ
.navbar-form
ຮຽນໝົດ. ມັນບໍ່ຈໍາເປັນອີກຕໍ່ໄປ; ແທນທີ່ຈະ, ພຽງແຕ່ໃຊ້.form-inline
ແລະນໍາໃຊ້ຜົນປະໂຫຍດຂອບຕາມຄວາມຈໍາເປັນ. - Navbars ບໍ່ລວມ
margin-bottom
ຫຼືborder-radius
ໂດຍຄ່າເລີ່ມຕົ້ນ. ໃຊ້ເຄື່ອງໃຊ້ຕ່າງໆຕາມຄວາມຈໍາເປັນ. - ຕົວຢ່າງທັງຫມົດທີ່ມີ navbars ໄດ້ຖືກປັບປຸງເພື່ອປະກອບມີເຄື່ອງຫມາຍໃຫມ່.
- ຂຽນອົງປະກອບໃຫມ່ດ້ວຍ flexbox.
- ຫ້ອງຮຽນທີ່ຊັດເຈນ (
.page-item
,.page-link
) ແມ່ນຕ້ອງການຢູ່ໃນລູກຫລານຂອງ.pagination
s - ຫຼຸດລົງ
.pager
ອົງປະກອບທັງຫມົດຍ້ອນວ່າມັນແມ່ນຫຼາຍກ່ວາປຸ່ມກໍານົດເອງເລັກນ້ອຍ.
- ຫ້ອງຮຽນທີ່ຊັດເຈນ
.breadcrumb-item
, ປະຈຸບັນແມ່ນຕ້ອງການກ່ຽວກັບລູກຫລານຂອງ.breadcrumb
s
- ປ່ຽນຊື່
.label
ເພື່ອ.badge
ແຍກອອກຈາກ<label>
ອົງປະກອບ. - ຫຼຸດລົງ
.badge
ອົງປະກອບເນື່ອງຈາກວ່າມັນເກືອບຄືກັນກັບປ້າຍຊື່. ໃຊ້.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
.
- ປັບປຸງອົງປະກອບທັງໝົດເພື່ອເຮັດໃຫ້ການອອກແບບ ແລະການຈັດຮູບແບບງ່າຍຂຶ້ນ. ພວກເຮົາມີຮູບແບບຫນ້ອຍສໍາລັບທ່ານທີ່ຈະລົບລ້າງ, ຕົວຊີ້ວັດໃຫມ່, ແລະໄອຄອນໃຫມ່.
- 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, ເລື່ອນໄປຫາຜົນປະໂຫຍດ.
- ປັບປ່ຽນຕົວຢ່າງ 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 ຄໍານໍາຫນ້າຂອງ ຜູ້ຂາຍ 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.rb
plugin ເລີ່ມຕົ້ນ, ຊ່ວຍໃຫ້ການຈັດການລະຫັດຕົວຢ່າງງ່າຍຂຶ້ນ.callout.rb
ເປັນສ້ອມແບບກຳນົດເອງທີ່ຄ້າຍຄືກັນຂອງສິ່ງນັ້ນ, ແຕ່ອອກແບບມາເພື່ອການເອີ້ນເອກະສານພິເສດຂອງພວກເຮົາ.markdown-block.rb
ຖືກນໍາໃຊ້ເພື່ອສະແດງ Markdown snippets ພາຍໃນອົງປະກອບ HTML ເຊັ່ນຕາຕະລາງ.- 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
- ລຶບອອກຈາກ v3:
- ເຄື່ອງມືການພິມບໍ່ໄດ້ເລີ່ມຕົ້ນດ້ວຍ
.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 ແບບກຳນົດເອງໃນກໍລະນີດັ່ງກ່າວ.