Berhijrah daripada 2.x kepada 3.0

Bootstrap 3 tidak serasi ke belakang dengan v2.x. Gunakan bahagian ini sebagai panduan umum untuk menaik taraf daripada v2.x kepada v3.0. Untuk gambaran keseluruhan yang lebih luas, lihat perkara baharu dalam pengumuman keluaran v3.0.

Perubahan kelas utama

Jadual ini menunjukkan perubahan gaya antara v2.x dan 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 Berpecah kepada.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Berpecah kepada.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

Apa yang baru

Kami telah menambah elemen baharu dan menukar beberapa elemen sedia ada. Berikut ialah gaya baharu atau dikemas kini.

unsur Penerangan
Panel .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Senaraikan kumpulan .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Grid kecil tambahan (<768px) .col-xs-*
Grid kecil (≥768px) .col-sm-*
Grid sederhana (≥992px) .col-md-*
Grid besar (≥1200px) .col-lg-*
Kelas utiliti responsif (≥1200px) .visible-lg .hidden-lg
Offset .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Tolak .col-sm-push-* .col-md-push-* .col-lg-push-*
Tarik .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Saiz ketinggian input .input-sm .input-lg
Kumpulan input .input-group .input-group-addon .input-group-btn
Kawalan borang .form-control .form-group
Saiz kumpulan butang .btn-group-xs .btn-group-sm .btn-group-lg
Teks Navbar .navbar-text
Pengepala Navbar .navbar-header
Tab / pil yang dibenarkan .nav-justified
Imej responsif .img-responsive
Barisan jadual kontekstual .success .danger .warning .active .info
Panel kontekstual .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imej kecil .img-thumbnail
Saiz telaga .well-sm .well-lg
Pautan amaran .alert-link

Apa yang dialih keluar

Elemen berikut telah digugurkan atau diubah dalam v3.0.

unsur Dialih keluar daripada 2.x 3.0 Setara
Membentuk tindakan .form-actions T/A
Borang carian .form-search T/A
Bentuk kumpulan dengan maklumat .control-group.info T/A
Saiz input lebar tetap .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gunakan .form-controldan sistem grid sebaliknya.
Input borang peringkat blok .input-block-level Tiada persamaan langsung, tetapi kawalan borang adalah serupa.
Butang songsang .btn-inverse T/A
Barisan bendalir .row-fluid .row(tiada lagi grid tetap)
Mengawal pembalut .controls T/A
Mengawal baris .controls-row .rowatau.form-group
Navbar dalam .navbar-inner T/A
Pembahagi menegak Navbar .navbar .divider-vertical T/A
Submenu lungsur turun .dropdown-submenu T/A
Penjajaran tab .tabs-left .tabs-right .tabs-below T/A
Kawasan boleh tab berasaskan pil .pill-content .tab-content
Anak tetingkap kawasan boleh tab berasaskan pil .pill-pane .tab-pane
Senarai navigasi .nav-list .nav-header Tiada setara langsung, tetapi senarai kumpulan dan .panel-groups adalah serupa.
Bantuan sebaris untuk kawalan borang .help-inline Tiada persamaan yang tepat, tetapi .help-blockserupa.
Warna kemajuan bukan peringkat bar .progress-info .progress-success .progress-warning .progress-danger Gunakan .progress-bar-*pada .progress-barsebaliknya.

Nota tambahan

Perubahan lain dalam v3.0 tidak kelihatan serta-merta. Kelas asas, gaya utama dan tingkah laku telah dilaraskan untuk fleksibiliti dan pendekatan pertama mudah alih kami. Berikut ialah senarai separa:

  • Secara lalai, kawalan borang berasaskan teks kini hanya menerima penggayaan minimum. Untuk warna fokus dan sudut bulat, gunakan .form-controlkelas pada elemen untuk gaya.
  • Kawalan borang berasaskan teks dengan .form-controlkelas yang digunakan kini 100% lebar secara lalai. Balut input di dalam <div class="col-*"></div>untuk mengawal lebar input.
  • .badgetidak lagi mempunyai kelas kontekstual (-success,-primary, etc..).
  • .btnmesti juga digunakan .btn-defaultuntuk mendapatkan butang "lalai".
  • .rowkini cair.
  • Imej tidak lagi responsif secara lalai. Gunakan untuk saiz .img-responsivebendalir .<img>
  • Ikon, kini .glyphicon, kini berasaskan fon. Ikon juga memerlukan kelas asas dan ikon (cth .glyphicon .glyphicon-asterisk).
  • Typeahead telah digugurkan, memihak kepada penggunaan Twitter Typeahead .
  • Penanda modal telah berubah dengan ketara. Bahagian .modal-header, .modal-body, dan .modal-footerkini dibungkus .modal-contentdan .modal-dialoguntuk penggayaan dan tingkah laku mudah alih yang lebih baik. Selain itu, anda tidak perlu lagi memohon .hidedalam .modalmarkup anda.
  • Mulai v3.1.0, HTML yang dimuatkan oleh remotepilihan modal kini disuntik ke dalam .modal-content(dari v3.0.0 hingga v3.0.3, ke dalam .modal) dan bukannya ke dalam .modal-body. Ini membolehkan anda mengubah pengepala dan pengaki modal dengan mudah, bukan hanya badan modal.
  • Kotak semak dan ciri radio pemalam button.js kini digunakan data-toggle="buttons"dan bukannya data-toggle="buttons-checkbox"atau data-toggle="buttons-radio"dalam penandanya.
  • Acara JavaScript diberi ruang nama. Sebagai contoh, untuk mengendalikan acara "tunjukkan" modal, gunakan 'show.bs.modal'. Untuk tab "ditunjukkan" gunakan 'shown.bs.tab', dsb.

Untuk mendapatkan maklumat lanjut tentang menaik taraf kepada v3.0 dan coretan kod daripada komuniti, lihat Bootply .