Berhijrah ke v3.x
Panduan tentang cara untuk meningkatkan daripada Bootstrap v2.x kepada v3.x dengan penekanan pada perubahan besar, perkara baharu dan perkara yang telah dialih keluar.
Panduan tentang cara untuk meningkatkan daripada Bootstrap v2.x kepada v3.x dengan penekanan pada perubahan besar, perkara baharu dan perkara yang telah dialih keluar.
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.
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 |
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 |
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-control dan sistem grid sebaliknya. |
Input borang peringkat blok | .input-block-level |
Tiada setara 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 |
.row atau.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-group s adalah serupa. |
Bantuan sebaris untuk kawalan borang | .help-inline |
Tiada persamaan yang tepat, tetapi .help-block serupa. |
Warna kemajuan bukan peringkat bar | .progress-info .progress-success .progress-warning .progress-danger |
Gunakan .progress-bar-* pada .progress-bar sebaliknya. |
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:
.form-control
kelas pada elemen untuk gaya..form-control
kelas yang digunakan kini 100% lebar secara lalai. Balut input di dalam <div class="col-*"></div>
untuk mengawal lebar input..badge
tidak lagi mempunyai kelas kontekstual (-success,-primary, etc..)..btn
mesti juga digunakan .btn-default
untuk mendapatkan butang "lalai"..row
kini cair..img-responsive
bendalir .<img>
.glyphicon
, kini berasaskan fon. Ikon juga memerlukan kelas asas dan ikon (cth .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, dan .modal-footer
kini dibungkus .modal-content
dan .modal-dialog
untuk penggayaan dan tingkah laku mudah alih yang lebih baik. Selain itu, anda tidak perlu lagi memohon .hide
dalam .modal
markup anda.remote
pilihan 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.data-toggle="buttons"
dan bukannya data-toggle="buttons-checkbox"
atau data-toggle="buttons-radio"
dalam penandanya.'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 .