Migrasi dari 2.x ke 3.0

Bootstrap 3 tidak kompatibel dengan v2.x. Gunakan bagian ini sebagai panduan umum untuk meningkatkan dari v2.x ke v3.0. Untuk ikhtisar yang lebih luas, lihat apa yang baru di pengumuman rilis v3.0.

Perubahan kelas utama

Tabel 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 Dibagi menjadi.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dibagi menjadi.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 menambahkan elemen baru dan mengubah beberapa elemen yang sudah ada. Berikut adalah gaya baru atau yang diperbarui.

Elemen Keterangan
Panel .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Daftar grup .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicon .glyphicon
Jumbotron .jumbotron
Kisi ekstra kecil (<768px) .col-xs-*
Kisi kecil (≥768px) .col-sm-*
Kisi sedang (≥992px) .col-md-*
Kisi besar (≥1200px) .col-lg-*
Kelas utilitas responsif (≥1200px) .visible-lg .hidden-lg
Offset .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Dorongan .col-sm-push-* .col-md-push-* .col-lg-push-*
Menarik .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Masukan ukuran tinggi .input-sm .input-lg
Grup masukan .input-group .input-group-addon .input-group-btn
Kontrol formulir .form-control .form-group
Ukuran grup tombol .btn-group-xs .btn-group-sm .btn-group-lg
Teks bilah navigasi .navbar-text
Tajuk bilah navigasi .navbar-header
Tab / pil yang dibenarkan .nav-justified
Gambar responsif .img-responsive
Baris tabel kontekstual .success .danger .warning .active .info
Panel kontekstual .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Gambar kecil .img-thumbnail
Ukuran sumur .well-sm .well-lg
Tautan peringatan .alert-link

Apa yang dihapus?

Elemen berikut telah dihapus atau diubah di v3.0.

Elemen Dihapus dari 2.x 3.0 Setara
Bentuk tindakan .form-actions T/A
Cari formulir .form-search T/A
Bentuk grup dengan info .control-group.info T/A
Ukuran input lebar tetap .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gunakan .form-controldan sistem grid sebagai gantinya.
Blok input formulir level .input-block-level Tidak ada padanan langsung, tetapi kontrol bentuk serupa.
Tombol terbalik .btn-inverse T/A
Baris cairan .row-fluid .row(tidak ada lagi jaringan tetap)
Pembungkus kontrol .controls T/A
Baris kontrol .controls-row .rowatau.form-group
Navbar dalam .navbar-inner T/A
Pembagi vertikal Navbar .navbar .divider-vertical T/A
Submenu tarik-turun .dropdown-submenu T/A
Perataan tab .tabs-left .tabs-right .tabs-below T/A
Area tabable berbasis pil .pill-content .tab-content
Panel area tabable berbasis pil .pill-pane .tab-pane
daftar navigasi .nav-list .nav-header Tidak ada padanan langsung, tetapi grup daftar dan .panel-groups serupa.
Bantuan sebaris untuk kontrol formulir .help-inline Tidak ada padanan yang tepat, tetapi .help-blockserupa.
Warna kemajuan tingkat non-bar .progress-info .progress-success .progress-warning .progress-danger Gunakan .progress-bar-*sebagai .progress-bargantinya.

Catatan tambahan

Perubahan lain di v3.0 tidak segera terlihat. Kelas dasar, gaya utama, dan perilaku telah disesuaikan untuk fleksibilitas dan pendekatan seluler pertama kami. Berikut sebagian daftarnya:

  • Secara default, kontrol formulir berbasis teks sekarang hanya menerima gaya minimal. Untuk warna fokus dan sudut membulat, terapkan .form-controlkelas pada elemen ke gaya.
  • Kontrol formulir berbasis teks dengan .form-controlkelas yang diterapkan sekarang 100% lebar secara default. Bungkus input di dalam <div class="col-*"></div>untuk mengontrol lebar input.
  • .badgetidak lagi memiliki kelas kontekstual (-success,-primary, dll.).
  • .btnjuga harus digunakan .btn-defaultuntuk mendapatkan tombol "default".
  • .rowsekarang cair.
  • Gambar tidak lagi responsif secara default. Gunakan untuk ukuran .img-responsivecairan .<img>
  • Ikon, sekarang .glyphicon, sekarang berbasis font. Ikon juga memerlukan basis dan kelas ikon (mis .glyphicon .glyphicon-asterisk.).
  • Typeahead telah dijatuhkan, mendukung penggunaan Twitter Typeahead .
  • Markup modal telah berubah secara signifikan. Bagian .modal-header, .modal-body, dan .modal-footerkini digabungkan .modal-contentdan .modal-dialoguntuk gaya dan perilaku seluler yang lebih baik. Juga, Anda seharusnya tidak lagi mendaftar .hideke .modaldalam markup Anda.
  • Mulai v3.1.0, HTML yang dimuat oleh remoteopsi modal sekarang disuntikkan ke dalam .modal-content(dari v3.0.0 ke v3.0.3, ke dalam .modal) alih-alih ke .modal-body. Ini memungkinkan Anda juga dengan mudah memvariasikan header dan footer modal, bukan hanya badan modal.
  • Fitur kotak centang dan radio dari plugin button.js sekarang digunakan data-toggle="buttons"sebagai ganti data-toggle="buttons-checkbox"atau data-toggle="buttons-radio"dalam markupnya.
  • Acara JavaScript diberi namespace. Misalnya, untuk menangani acara modal "show", gunakan 'show.bs.modal'. Untuk tab "ditampilkan", gunakan 'shown.bs.tab', dll.

Untuk informasi selengkapnya tentang meningkatkan ke v3.0, dan cuplikan kode dari komunitas, lihat Bootply .