Lumilipat mula 2.x hanggang 3.0

Ang Bootstrap 3 ay hindi paatras na tugma sa v2.x. Gamitin ang seksyong ito bilang pangkalahatang gabay sa pag-upgrade mula v2.x hanggang v3.0. Para sa mas malawak na pangkalahatang-ideya, tingnan kung ano ang bago sa anunsyo ng paglabas ng v3.0.

Mga pangunahing pagbabago sa klase

Ipinapakita ng talahanayang ito ang mga pagbabago sa istilo sa pagitan ng v2.x at 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 Hatiin sa.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Hatiin sa.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

Anong bago

Nagdagdag kami ng mga bagong elemento at binago ang ilang mga umiiral na. Narito ang mga bago o na-update na istilo.

Elemento Paglalarawan
Mga panel .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Maglista ng mga pangkat .list-group .list-group-item .list-group-item-text .list-group-item-heading
Mga Glyphicon .glyphicon
Jumbotron .jumbotron
Napakaliit na grid (<768px) .col-xs-*
Maliit na grid (≥768px) .col-sm-*
Katamtamang grid (≥992px) .col-md-*
Malaking grid (≥1200px) .col-lg-*
Mga klase ng tumutugon na utility (≥1200px) .visible-lg .hidden-lg
Mga offset .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Itulak .col-sm-push-* .col-md-push-* .col-lg-push-*
Hilahin .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Mga laki ng taas ng input .input-sm .input-lg
Mga pangkat ng input .input-group .input-group-addon .input-group-btn
Mga kontrol sa form .form-control .form-group
Mga laki ng pangkat ng pindutan .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Mga makatwirang tab / tabletas .nav-justified
Mga larawang tumutugon .img-responsive
Mga hilera ng talahanayan sa konteksto .success .danger .warning .active .info
Mga panel ng konteksto .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Larawan ng thumbnail .img-thumbnail
Well sizes .well-sm .well-lg
Mga link ng alerto .alert-link

Ano ang tinanggal

Ang mga sumusunod na elemento ay ibinagsak o binago sa v3.0.

Elemento Inalis mula sa 2.x 3.0 Katumbas
Bumuo ng mga aksyon .form-actions N/A
Form ng paghahanap .form-search N/A
Bumuo ng pangkat na may impormasyon .control-group.info N/A
Fixed-width na laki ng input .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gamitin .form-controlat ang grid system sa halip.
Pag-input ng form sa antas ng block .input-block-level Walang direktang katumbas, ngunit magkapareho ang mga kontrol sa form .
Mga baligtad na pindutan .btn-inverse N/A
Hilera ng likido .row-fluid .row(wala nang nakapirming grid)
Kinokontrol ang wrapper .controls N/A
Kinokontrol ang hilera .controls-row .rowo.form-group
Navbar sa loob .navbar-inner N/A
Navbar vertical divider .navbar .divider-vertical N/A
Dropdown na submenu .dropdown-submenu N/A
Mga alignment ng tab .tabs-left .tabs-right .tabs-below N/A
Pill-based na tabable area .pill-content .tab-content
Pill-based na tabable area pane .pill-pane .tab-pane
Mga listahan ng Nav .nav-list .nav-header Walang direktang katumbas, ngunit magkatulad ang listahan ng mga pangkat at .panel-groups .
Inline na tulong para sa mga kontrol sa form .help-inline Walang eksaktong katumbas, ngunit .help-blockmagkatulad.
Mga kulay ng pag-unlad na hindi antas ng bar .progress-info .progress-success .progress-warning .progress-danger Gamitin .progress-bar-*sa .progress-barhalip.

Mga karagdagang tala

Ang iba pang mga pagbabago sa v3.0 ay hindi agad nakikita. Ang mga batayang klase, pangunahing istilo, at gawi ay naayos para sa flexibility at ang aming mobile first approach. Narito ang isang bahagyang listahan:

  • Bilang default, ang mga kontrol sa form na nakabatay sa teksto ay nakakatanggap na ngayon ng kaunting istilo. Para sa mga kulay ng focus at mga bilugan na sulok, ilapat ang .form-controlklase sa elemento sa istilo.
  • Ang mga kontrol sa form na nakabatay sa teksto na may .form-controlinilapat na klase ay 100% na ngayon ang lapad bilang default. I- wrap ang mga input sa loob <div class="col-*"></div>para makontrol ang mga lapad ng input.
  • .badgewala nang contextual (-success,-primary,etc..) na mga klase.
  • .btndapat ding gamitin .btn-defaultpara makuha ang "default" na button.
  • .roway likido na ngayon.
  • Hindi na tumutugon ang mga larawan bilang default. Gamitin .img-responsivepara sa laki ng likido <img>.
  • Ang mga icon, ngayon .glyphicon, ay nakabatay na sa font. Ang mga icon ay nangangailangan din ng base at icon na klase (hal .glyphicon .glyphicon-asterisk).
  • Ang Typeahead ay ibinaba, sa pabor sa paggamit ng Twitter Typeahead .
  • Malaking pagbabago ang markup ng modal. Ang .modal-header, .modal-body, at .modal-footermga seksyon ay nakabalot na ngayon .modal-contentat .modal-dialogpara sa mas mahusay na istilo at gawi sa mobile. Gayundin, hindi ka na dapat mag-apply .hidesa .modaliyong markup.
  • Simula sa v3.1.0, ang HTML na na-load ng remotemodal na opsyon ay ini-inject na ngayon sa .modal-content(mula sa v3.0.0 hanggang v3.0.3, sa .modal) ​​sa halip na sa .modal-body. Nagbibigay-daan ito sa iyong madaling pag-iba-iba ang header at footer ng modal, hindi lang ang modal body.
  • Ang checkbox at mga radio feature ng button.js plugin ay ginagamit na ngayon sa data-toggle="buttons"halip na data-toggle="buttons-checkbox"o data-toggle="buttons-radio"sa kanilang markup.
  • Ang mga kaganapan sa JavaScript ay namespaced. Halimbawa, para pangasiwaan ang modal "show" na kaganapan, gamitin ang 'show.bs.modal'. Para sa mga tab na "ipinakita" gamitin ang 'shown.bs.tab', atbp.

Para sa higit pang impormasyon sa pag-upgrade sa v3.0, at mga snippet ng code mula sa komunidad, tingnan ang Bootply .