Migrado de 2.x al 3.0

Bootstrap 3 ne estas malantaŭen kongrua kun v2.x. Uzu ĉi tiun sekcion kiel ĝeneralan gvidilon al ĝisdatigo de v2.x al v3.0. Por pli larĝa superrigardo, vidu kio estas nova en la v3.0-eldona anonco.

Gravaj klasŝanĝoj

Ĉi tiu tabelo montras la stilŝanĝojn inter v2.x kaj 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 Dividi en.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dividi en.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

Kio novas

Ni aldonis novajn elementojn kaj ŝanĝis kelkajn ekzistantajn. Jen la novaj aŭ ĝisdatigitaj stiloj.

Elemento Priskribo
Paneloj .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listo grupoj .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifikonoj .glyphicon
Jumbotron .jumbotron
Ekstra malgranda krado (<768px) .col-xs-*
Malgranda krado (≥768px) .col-sm-*
Meza krado (≥992px) .col-md-*
Granda krado (≥1200px) .col-lg-*
Respondema utilaj klasoj (≥1200px) .visible-lg .hidden-lg
Ofsetoj .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Puŝu .col-sm-push-* .col-md-push-* .col-lg-push-*
Tiro .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Eniga alteco grandecoj .input-sm .input-lg
Eniggrupoj .input-group .input-group-addon .input-group-btn
Formkontroloj .form-control .form-group
Butongrupoj grandecoj .btn-group-xs .btn-group-sm .btn-group-lg
Navbar teksto .navbar-text
Navbar kaplinio .navbar-header
Pravigitaj langetoj / piloloj .nav-justified
Respondema bildoj .img-responsive
Kuntekstaj tabelvicoj .success .danger .warning .active .info
Kuntekstaj paneloj .panel-success .panel-danger .panel-warning .panel-info
Modala .modal-dialog .modal-content
Bildeto bildo .img-thumbnail
Bonaj grandecoj .well-sm .well-lg
Alerta ligiloj .alert-link

Kio estas forigita

La sekvaj elementoj estis forigitaj aŭ ŝanĝitaj en v3.0.

Elemento Forigita de 2.x 3.0 Ekvivalento
Formi agojn .form-actions N/A
Serĉformularo .form-search N/A
Formu grupon kun informoj .control-group.info N/A
Fiksa larĝa enigo grandecoj .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Uzu .form-controlkaj la kradsistemon anstataŭe.
Bloknivela formo-enigo .input-block-level Neniu rekta ekvivalento, sed formkontroloj estas similaj.
Inversaj butonoj .btn-inverse N/A
Fluida vico .row-fluid .row(ne plu fiksa krado)
Kontrolas envolvaĵon .controls N/A
Kontrolas vicon .controls-row .rowaŭ.form-group
Navbar interna .navbar-inner N/A
Navbar vertikalaj disigiloj .navbar .divider-vertical N/A
Dropdown submenuo .dropdown-submenu N/A
Tabeklinioj .tabs-left .tabs-right .tabs-below N/A
Tabulebla areo bazita sur piloloj .pill-content .tab-content
Pilol-bazita tabulada areofenestro .pill-pane .tab-pane
Nav-listoj .nav-list .nav-header Neniu rekta ekvivalento, sed listgrupoj kaj .panel-groups estas similaj.
Enlinia helpo por formularaj kontroloj .help-inline Neniu preciza ekvivalento, sed .help-blockestas simila.
Ne-stange-nivelaj progresokoloroj .progress-info .progress-success .progress-warning .progress-danger Uzu .progress-bar-*sur la .progress-baranstataŭe.

Pliaj notoj

Aliaj ŝanĝoj en v3.0 ne tuj evidentiĝas. Bazaj klasoj, ŝlosilaj stiloj kaj kondutoj estis ĝustigitaj por fleksebleco kaj nia movebla unua aliro. Jen parta listo:

  • Defaŭlte, tekst-bazitaj formularaj kontroloj nun ricevas nur minimuman stilon. Por fokusaj koloroj kaj rondigitaj anguloj, apliku la .form-controlklason sur la elemento al stilo.
  • Tekst-bazitaj formularaj kontroloj kun la .form-controlklaso aplikata estas nun 100% larĝaj defaŭlte. Envolvu enigojn <div class="col-*"></div>por kontroli enigajn larĝojn.
  • .badgene plu havas kuntekstajn (-sukceson,-primaran, ktp..) klasojn.
  • .btndevas ankaŭ uzi .btn-defaultpor akiri la "defaŭltan" butonon.
  • .rownun estas fluida.
  • Bildoj ne plu respondas defaŭlte. Uzu .img-responsivepor fluida <img>grandeco.
  • La ikonoj nun .glyphicon, nun baziĝas sur tiparo. Piktogramoj ankaŭ postulas bazan kaj ikonklason (ekz .glyphicon .glyphicon-asterisk. ).
  • Typeahead estis forigita, en favoro de uzado de Twitter Typeahead .
  • Modala markado ŝanĝiĝis signife. La sekcioj .modal-header, .modal-body, kaj nun estas envolvitaj en kaj por pli bona poŝtelefona stilo kaj konduto. Ankaŭ, vi ne plu devas apliki en via markado..modal-footer.modal-content.modal-dialog.hide.modal
  • Ekde v3.1.0, la HTML ŝarĝita per la remotemodala opcio nun estas injektita en la .modal-content(de v3.0.0 ĝis v3.0.3, en la .modal) anstataŭ en la .modal-body. Ĉi tio ebligas al vi ankaŭ facile varii la kaplinion kaj piedpiedon de la modalo, ne nur la modala korpo.
  • La markobutono kaj radiofunkcioj de la kromaĵo button.js nun ambaŭ uzas data-toggle="buttons"anstataŭ data-toggle="buttons-checkbox"aŭ data-toggle="buttons-radio"en sia markado.
  • JavaScript-okazaĵoj estas nomspacigitaj. Ekzemple, por trakti la modalan "montri" eventon, uzu 'show.bs.modal'. Por langetoj "montritaj" uzu 'shown.bs.tab', ktp.

Por pliaj informoj pri ĝisdatigo al v3.0, kaj kodaj fragmentoj de la komunumo, vidu Bootply .