Migrasi tina 2.x ka 3.0

Bootstrap 3 teu mundur cocog sareng v2.x. Paké bagian ieu salaku pituduh umum pikeun ngaronjatkeun tina v2.x mun v3.0. Pikeun gambaran nu leuwih lega, tingali naon nu anyar dina v3.0 release pengumuman.

Parobahan kelas utama

tabél ieu nembongkeun parobahan gaya antara v2.x na 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 Beulah kana.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Beulah kana.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

Aya naon anu énggal

Kami parantos nambihan elemen énggal sareng ngarobih sababaraha anu parantos aya. Ieu mangrupikeun gaya énggal atanapi diropéa.

unsur Katerangan
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Daptar grup .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Kotak tambahan leutik (<768px) .col-xs-*
Grid leutik (≥768px) .col-sm-*
Kotak sedeng (≥992px) .col-md-*
Grid ageung (≥1200px) .col-lg-*
Kelas utilitas responsif (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Teken .col-sm-push-* .col-md-push-* .col-lg-push-*
Betot .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input ukuran jangkungna .input-sm .input-lg
Grup input .input-group .input-group-addon .input-group-btn
Kadali formulir .form-control .form-group
Ukuran grup tombol .btn-group-xs .btn-group-sm .btn-group-lg
Navbar téks .navbar-text
Navbar lulugu .navbar-header
Tab / pil anu dibenerkeun .nav-justified
Gambar responsif .img-responsive
Baris tabel kontekstual .success .danger .warning .active .info
panels kontekstual .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Gambar leutik .img-thumbnail
Ukuran sumur .well-sm .well-lg
Tumbu waspada .alert-link

Naon anu dipiceun

Unsur di handap ieu geus turun atawa robah dina v3.0.

unsur Dipiceun tina 2.x 3.0 Sarua
Bentuk tindakan .form-actions N/A
Formulir pilarian .form-search N/A
Bentuk grup kalayan inpormasi .control-group.info N/A
Ukuran input lebar tetep .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Paké .form-controljeung sistem grid gantina.
Input formulir tingkat blok .input-block-level Henteu aya sarimbag langsung, tapi kontrol bentukna sami.
Kancing tibalik .btn-inverse N/A
Baris cairan .row-fluid .row(euweuh deui grid tetep)
Kadali wrapper .controls N/A
Baris kontrol .controls-row .rowatawa.form-group
Navbar jero .navbar-inner N/A
Navbar ngabagi nangtung .navbar .divider-vertical N/A
Submenu dropdown .dropdown-submenu N/A
alignments tab .tabs-left .tabs-right .tabs-below N/A
Daérah tabbable dumasar pil .pill-content .tab-content
Panel aréa tabable dumasar pil .pill-pane .tab-pane
Daptar Nav .nav-list .nav-header Taya sarimbag langsung, tapi daptar grup na .panel-groups sarupa.
Pitulung inline pikeun kadali formulir .help-inline Taya sarimbag pasti, tapi .help-blocksarupa.
Warna kamajuan non-bar-tingkat .progress-info .progress-success .progress-warning .progress-danger Paké .progress-bar-*dina .progress-bargantina.

catetan tambahan

Parobahan sejenna dina v3.0 teu langsung katempo. Kelas dasar, gaya konci, sareng paripolah parantos disaluyukeun pikeun kalenturan sareng pendekatan mobile munggaran urang . Ieu daptar parsial:

  • Sacara standar, kadali formulir dumasar-téks ayeuna ngan nampi gaya minimal. Pikeun kelir fokus sarta sudut rounded, nerapkeun .form-controlkelas dina elemen pikeun gaya.
  • Kontrol formulir dumasar téks sareng .form-controlkelas anu diterapkeun ayeuna 100% lebar sacara standar. Bungkus input di jero <div class="col-*"></div>pikeun ngontrol lebar input.
  • .badgeeuweuh kelas kontekstual (-success,-primary, jsb.).
  • .btnogé kedah dianggo .btn-defaultpikeun kéngingkeun tombol "standar".
  • .rowayeuna cair.
  • Gambar henteu deui responsif sacara standar. Paké pikeun ukuran .img-responsivecairan .<img>
  • Ikon, ayeuna .glyphicon, ayeuna dumasar kana font. Ikon ogé ngabutuhkeun kelas dasar sareng ikon (contona .glyphicon .glyphicon-asterisk).
  • Typeahead parantos dileungitkeun, langkung milih ngagunakeun Twitter Typeahead .
  • Markup modal parantos robih sacara signifikan. The .modal-header, .modal-body, sarta .modal-footerbagian ayeuna dibungkus dina .modal-contentsarta .modal-dialogpikeun styling mobile hadé tur kabiasaan. Ogé, anjeun kedah henteu deui nerapkeun .hidedina .modalmarkup anjeun.
  • Salaku of v3.1.0, HTML dimuat ku remotepilihan modal ayeuna nyuntik kana .modal-content(tina v3.0.0 mun v3.0.3, kana .modal) tinimbang kana .modal-body. Hal ieu ngamungkinkeun anjeun ogé gampang rupa-rupa lulugu jeung footer tina modal, teu ngan awak modal.
  • Fitur kotak centang sareng radio tina plugin button.js ayeuna duanana dianggo data-toggle="buttons"tibatan data-toggle="buttons-checkbox"atanapi data-toggle="buttons-radio"dina markupna.
  • acara JavaScript anu namespaced. Contona, pikeun nanganan modal "acara" acara, make 'show.bs.modal'. Pikeun tab "ditémbongkeun" pamakéan 'shown.bs.tab', jsb.

Kanggo inpo nu langkung lengkep ihwal ningkatkeun ka v3.0, sarta snippét kode ti masarakat, tingali Bootply .