ການເຄື່ອນຍ້າຍໄປ v3.x
ຄໍາແນະນໍາກ່ຽວກັບວິທີການຍົກລະດັບຈາກ Bootstrap v2.x ເປັນ v3.x ໂດຍເນັ້ນຫນັກໃສ່ການປ່ຽນແປງທີ່ສໍາຄັນ, ສິ່ງໃຫມ່ແລະສິ່ງທີ່ຖືກໂຍກຍ້າຍ.
ຄໍາແນະນໍາກ່ຽວກັບວິທີການຍົກລະດັບຈາກ Bootstrap v2.x ເປັນ v3.x ໂດຍເນັ້ນຫນັກໃສ່ການປ່ຽນແປງທີ່ສໍາຄັນ, ສິ່ງໃຫມ່ແລະສິ່ງທີ່ຖືກໂຍກຍ້າຍ.
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-group s ແມ່ນຄ້າຍຄືກັນ. |
ການຊ່ວຍເຫຼືອໃນແຖວສໍາລັບການຄວບຄຸມແບບຟອມ | .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
)..modal-header
, .modal-body
, ແລະ .modal-footer
ຕອນນີ້ຖືກຫໍ່ຢູ່ໃນ .modal-content
ແລະ .modal-dialog
ສໍາລັບຮູບແບບ ແລະພຶດຕິກໍາມືຖືທີ່ດີກວ່າ. ນອກຈາກນັ້ນ, ທ່ານບໍ່ຄວນໃຊ້ ໃນເຄື່ອງຫມາຍຂອງທ່ານອີກຕໍ່ .hide
ໄປ .modal
.remote
ທາງເລືອກ modal ໃນປັດຈຸບັນໄດ້ຖືກສັກເຂົ້າໄປໃນ .modal-content
(ຈາກ v3.0.0 ກັບ v3.0.3, ເຂົ້າໄປໃນ .modal
) ແທນທີ່ຈະເຂົ້າໄປໃນ .modal-body
. ນີ້ອະນຸຍາດໃຫ້ທ່ານສາມາດປ່ຽນສ່ວນຫົວແລະສ່ວນທ້າຍຂອງ modal ໄດ້ຢ່າງງ່າຍດາຍ, ບໍ່ພຽງແຕ່ຮ່າງກາຍ modal.data-toggle="buttons"
ແທນ data-toggle="buttons-checkbox"
ຫຼື data-toggle="buttons-radio"
ໃນເຄື່ອງໝາຍຂອງພວກມັນ.'show.bs.modal'
. ສໍາລັບແຖບ "ສະແດງ" ການນໍາໃຊ້ 'shown.bs.tab'
, ແລະອື່ນໆ.ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບການອັບເກຣດເປັນ v3.0, ແລະລະຫັດຫຍໍ້ມາຈາກຊຸມຊົນ, ເບິ່ງ Bootply .