ການເຄື່ອນຍ້າຍຈາກ 2.x ຫາ 3.0

Bootstrap 3 ແມ່ນບໍ່ເຂົ້າກັນໄດ້ກັບ v2.x. ໃຊ້ພາກນີ້ເປັນຄໍາແນະນໍາທົ່ວໄປໃນການຍົກລະດັບຈາກ v2.x ເປັນ v3.0. ສໍາລັບພາບລວມທີ່ກວ້າງກວ່າ, ເບິ່ງ ວ່າມີຫຍັງໃຫມ່ ໃນການປະກາດການປ່ອຍ v3.0.

ການປ່ຽນແປງຊັ້ນຮຽນທີ່ສໍາຄັນ

ຕາຕະລາງນີ້ສະແດງໃຫ້ເຫັນການປ່ຽນແປງຮູບແບບລະຫວ່າງ v2.x ແລະ v3.0.

Bootstrap 2.x Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop ແບ່ງອອກເປັນ.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop ແບ່ງອອກເປັນ.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

ມີ​ຫຍັງ​ໃຫມ່

ພວກເຮົາໄດ້ເພີ່ມອົງປະກອບໃຫມ່ແລະປ່ຽນແປງບາງອັນທີ່ມີຢູ່ແລ້ວ. ນີ້ແມ່ນຮູບແບບໃໝ່ ຫຼືອັບເດດ.

ອົງປະກອບ ລາຍລະອຽດ
ແຜງ .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
ລາຍຊື່ກຸ່ມ .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
ຈູມໂບຕຣອນ .jumbotron
ຕາລາງນ້ອຍພິເສດ (<768px) .col-xs-*
ຕາໜ່າງຂະໜາດນ້ອຍ (≥768px) .col-sm-*
ຕາຂ່າຍກາງ (≥992px) .col-md-*
ຕາຂ່າຍໃຫຍ່ (≥1200px) .col-lg-*
ຫ້ອງຮຽນປະໂຫຍດທີ່ຕອບສະໜອງ (≥1200px) .visible-lg .hidden-lg
ຊົດເຊີຍ .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
ຍູ້ .col-sm-push-* .col-md-push-* .col-lg-push-*
ດຶງ .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
ປ້ອນຂະໜາດຄວາມສູງ .input-sm .input-lg
ກຸ່ມປ້ອນຂໍ້ມູນ .input-group .input-group-addon .input-group-btn
ການຄວບຄຸມແບບຟອມ .form-control .form-group
ຂະໜາດກຸ່ມປຸ່ມ .btn-group-xs .btn-group-sm .btn-group-lg
ຂໍ້ຄວາມ Navbar .navbar-text
ສ່ວນຫົວ Navbar .navbar-header
ຢາເມັດ / ຢາທີ່ສົມເຫດສົມຜົນ .nav-justified
ຮູບພາບທີ່ຕອບສະຫນອງ .img-responsive
ແຖວຕາຕະລາງບໍລິບົດ .success .danger .warning .active .info
ແຜງບໍລິບົດ .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
ຮູບຕົວຢ່າງ .img-thumbnail
ຂະຫນາດດີ .well-sm .well-lg
ລິ້ງແຈ້ງເຕືອນ .alert-link

ສິ່ງທີ່ເອົາອອກ

ອົງປະກອບຕໍ່ໄປນີ້ໄດ້ຖືກຫຼຸດລົງຫຼືປ່ຽນແປງໃນ v3.0.

ອົງປະກອບ ເອົາອອກຈາກ 2.x 3.0 ທຽບເທົ່າ
ການປະຕິບັດແບບຟອມ .form-actions ບໍ່ມີ
ແບບຟອມຄົ້ນຫາ .form-search ບໍ່ມີ
ສ້າງ​ກຸ່ມ​ທີ່​ມີ​ຂໍ້​ມູນ​ .control-group.info ບໍ່ມີ
ຂະໜາດວັດສະດຸປ້ອນຄວາມກວ້າງຄົງທີ່ .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge ໃຊ້ .form-controlແລະ ລະບົບຕາຂ່າຍໄຟຟ້າ ແທນ.
ບລັອກການປ້ອນຂໍ້ມູນແບບຟອມ .input-block-level ບໍ່ທຽບເທົ່າໂດຍກົງ, ແຕ່ ການຄວບຄຸມແບບຟອມ ແມ່ນຄ້າຍຄືກັນ.
ປຸ່ມປີ້ນ .btn-inverse ບໍ່ມີ
ແຖວນ້ຳ .row-fluid .row(ບໍ່​ມີ​ຕາ​ຂ່າຍ​ທີ່​ຄົງ​ທີ່​ຫຼາຍ​)
ຄວບຄຸມ wrapper .controls ບໍ່ມີ
ຄວບຄຸມແຖວ .controls-row .rowຫຼື.form-group
Navbar ພາຍໃນ .navbar-inner ບໍ່ມີ
ຕົວແບ່ງແນວຕັ້ງ Navbar .navbar .divider-vertical ບໍ່ມີ
ເມນູຍ່ອຍແບບເລື່ອນລົງ .dropdown-submenu ບໍ່ມີ
ການຈັດວາງແຖບ .tabs-left .tabs-right .tabs-below ບໍ່ມີ
ພື້ນທີ່ຕັ້ງໂຕະທີ່ອີງໃສ່ຢາ .pill-content .tab-content
ແຖບພື້ນທີ່ສາມາດຕັ້ງໂຕະໄດ້ທີ່ອີງໃສ່ຢາ .pill-pane .tab-pane
ລາຍຊື່ nav .nav-list .nav-header ບໍ່ທຽບເທົ່າໂດຍກົງ, ແຕ່ ກຸ່ມລາຍຊື່ ແລະ .panel-groups ແມ່ນຄ້າຍຄືກັນ.
ການຊ່ວຍເຫຼືອໃນແຖວສໍາລັບການຄວບຄຸມແບບຟອມ .help-inline ບໍ່ມີທຽບເທົ່າທີ່ແນ່ນອນ, ແຕ່ .help-blockແມ່ນຄ້າຍຄືກັນ.
ສີຄວາມຄືບໜ້າລະດັບທີ່ບໍ່ແມ່ນແຖບ .progress-info .progress-success .progress-warning .progress-danger ໃຊ້ .progress-bar-*ແທນ .progress-bar.

ບັນທຶກເພີ່ມເຕີມ

ການປ່ຽນແປງອື່ນໆໃນ v3.0 ແມ່ນບໍ່ປາກົດຂື້ນໃນທັນທີ. ຫ້ອງຮຽນພື້ນຖານ, ຮູບແບບທີ່ສໍາຄັນ, ແລະພຶດຕິກໍາໄດ້ຖືກດັດແປງເພື່ອຄວາມຍືດຫຍຸ່ນແລະ ວິທີການ ທໍາອິດໃນມືຖື ຂອງພວກເຮົາ . ນີ້ແມ່ນລາຍຊື່ບາງສ່ວນ:

  • ໂດຍຄ່າເລີ່ມຕົ້ນ, ການຄວບຄຸມແບບຟອມທີ່ອີງໃສ່ຂໍ້ຄວາມໃນປັດຈຸບັນໄດ້ຮັບພຽງແຕ່ຮູບແບບຫນ້ອຍທີ່ສຸດ. ສໍາລັບສີໂຟກັສ ແລະມຸມມົນ, ໃຫ້ໃຊ້ .form-controlຊັ້ນໃນອົງປະກອບໃສ່ຮູບແບບ.
  • ການ​ຄວບ​ຄຸມ​ຮູບ​ແບບ​ທີ່​ອີງ​ໃສ່​ຂໍ້​ຄວາມ​ທີ່​ມີ .form-control​ຫ້ອງ​ທີ່​ນໍາ​ໃຊ້​ໃນ​ປັດ​ຈຸ​ບັນ​ແມ່ນ 100% ກວ້າງ​ໂດຍ​ຄ່າ​ເລີ່ມ​ຕົ້ນ​. ຫໍ່ວັດສະດຸປ້ອນພາຍໃນ <div class="col-*"></div>ເພື່ອຄວບຄຸມຄວາມກວ້າງຂອງວັດສະດຸປ້ອນ.
  • .badgeບໍ່ມີ contextual (-success,-primary, etc.) classes.
  • .btnຍັງຕ້ອງໃຊ້ .btn-defaultເພື່ອໃຫ້ໄດ້ປຸ່ມ "ຄ່າເລີ່ມຕົ້ນ".
  • .rowດຽວນີ້ມີນໍ້າ.
  • ຮູບພາບບໍ່ຕອບສະໜອງຕາມຄ່າເລີ່ມຕົ້ນ. ໃຊ້ .img-responsiveສໍາລັບຂະຫນາດຂອງນ້ໍາ <img>.
  • ໄອຄອນ, ດຽວນີ້ .glyphicon, ດຽວນີ້ແມ່ນໃຊ້ຕົວອັກສອນ. ໄອຄອນຍັງຕ້ອງການພື້ນຖານ ແລະໄອຄອນຊັ້ນ (ເຊັ່ນ .glyphicon .glyphicon-asterisk).
  • Typeahead ໄດ້ຖືກຫຼຸດລົງ, ໃນເງື່ອນໄຂຂອງການນໍາໃຊ້ Twitter Typeahead .
  • Modal markup ມີການປ່ຽນແປງຢ່າງຫຼວງຫຼາຍ. ສ່ວນ .modal-header, .modal-body, ແລະ .modal-footerຕອນນີ້ຖືກຫໍ່ຢູ່ໃນ .modal-contentແລະ .modal-dialogສໍາລັບຮູບແບບ ແລະພຶດຕິກໍາມືຖືທີ່ດີກວ່າ. ນອກຈາກນັ້ນ, ທ່ານບໍ່ຄວນໃຊ້ ໃນເຄື່ອງຫມາຍຂອງທ່ານອີກຕໍ່ .hideໄປ .modal.
  • ໃນ​ຖາ​ນະ​ເປັນ v3.1.0, HTML ໂຫຼດ​ໂດຍ remote​ທາງ​ເລືອກ modal ໃນ​ປັດ​ຈຸ​ບັນ​ໄດ້​ຖືກ​ສັກ​ເຂົ້າ​ໄປ​ໃນ .modal-content(ຈາກ v3.0.0 ກັບ v3.0.3, ເຂົ້າ​ໄປ​ໃນ .modal) ແທນ​ທີ່​ຈະ​ເຂົ້າ​ໄປ​ໃນ .modal-body. ນີ້ອະນຸຍາດໃຫ້ທ່ານສາມາດປ່ຽນສ່ວນຫົວແລະສ່ວນທ້າຍຂອງ modal ໄດ້ຢ່າງງ່າຍດາຍ, ບໍ່ພຽງແຕ່ຮ່າງກາຍ modal.
  • ກ່ອງກາໝາຍ ແລະຄຸນສົມບັດວິທະຍຸຂອງປລັກອິນ button.js ໃນປັດຈຸບັນທັງສອງໃຊ້ data-toggle="buttons"ແທນ data-toggle="buttons-checkbox"ຫຼື data-toggle="buttons-radio"ໃນເຄື່ອງໝາຍຂອງພວກມັນ.
  • ເຫດການ JavaScript ແມ່ນ namespaced. ຕົວຢ່າງ, ເພື່ອຈັດການເຫດການ "ສະແດງ", ໃຊ້ 'show.bs.modal'. ສໍາລັບແຖບ "ສະແດງ" ການນໍາໃຊ້ 'shown.bs.tab', ແລະອື່ນໆ.

ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບການອັບເກຣດເປັນ v3.0, ແລະລະຫັດຫຍໍ້ມາຈາກຊຸມຊົນ, ເບິ່ງ Bootply .