Lumilipat sa v3.x
Gabay sa kung paano mag-upgrade mula sa Bootstrap v2.x patungo sa v3.x na may diin sa mga malalaking pagbabago, kung ano ang bago, at kung ano ang naalis.
Gabay sa kung paano mag-upgrade mula sa Bootstrap v2.x patungo sa v3.x na may diin sa mga malalaking pagbabago, kung ano ang bago, at kung ano ang naalis.
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.
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 |
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 |
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-control at 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 |
.row o.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-group s . |
Inline na tulong para sa mga kontrol sa form | .help-inline |
Walang eksaktong katumbas, ngunit .help-block magkatulad. |
Mga kulay ng pag-unlad na hindi antas ng bar | .progress-info .progress-success .progress-warning .progress-danger |
Gamitin .progress-bar-* sa .progress-bar halip. |
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:
.form-control
klase sa elemento sa istilo..form-control
inilapat 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..badge
wala nang contextual (-success,-primary,etc..) na mga klase..btn
dapat ding gamitin .btn-default
para makuha ang "default" na button..row
ay likido na ngayon..img-responsive
para sa laki ng likido <img>
..glyphicon
, ay nakabatay na sa font. Ang mga icon ay nangangailangan din ng base at icon na klase (hal .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, at .modal-footer
mga seksyon ay nakabalot na ngayon .modal-content
at .modal-dialog
para sa mas mahusay na istilo at gawi sa mobile. Gayundin, hindi ka na dapat mag-apply .hide
sa .modal
iyong markup.remote
modal 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.data-toggle="buttons"
halip na data-toggle="buttons-checkbox"
o data-toggle="buttons-radio"
sa kanilang markup.'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 .