Migrazione da 2.x à 3.0

Bootstrap 3 ùn hè micca retrocompatibile cù v2.x. Aduprate sta sezione cum'è una guida generale per l'aghjurnamentu da v2.x à v3.0. Per una visione più larga, vede ciò chì hè novu in l'annunziu di liberazione v3.0.

Grandi cambiamenti di classi

Questa tabella mostra i cambiamenti di stile trà v2.x è 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 Split in.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split in.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

Ciò chì hè novu

Avemu aghjustatu novi elementi è cambiatu alcuni esistenti. Eccu i stili novi o aghjurnati.

Elementu Descrizzione
Pannelli .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lista gruppi .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glificoni .glyphicon
Jumbotron .jumbotron
Griglia extra chjuca (<768px) .col-xs-*
Piccola griglia (≥768px) .col-sm-*
Griglia media (≥992px) .col-md-*
Grande griglia (≥1200px) .col-lg-*
Classi di utilità rispunsevuli (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Spingi .col-sm-push-* .col-md-push-* .col-lg-push-*
Tira .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Taglie di altezza di input .input-sm .input-lg
Gruppi di input .input-group .input-group-addon .input-group-btn
Cuntrolli di forma .form-control .form-group
Dimensioni di i gruppi di buttone .btn-group-xs .btn-group-sm .btn-group-lg
Navbar testu .navbar-text
Intestazione di a barra di navigazione .navbar-header
Tabulature / pilule ghjustificate .nav-justified
Imàghjini rispunsevuli .img-responsive
Righe di tabella contestuale .success .danger .warning .active .info
Pannelli contestuale .panel-success .panel-danger .panel-warning .panel-info
Modale .modal-dialog .modal-content
Immagine miniatura .img-thumbnail
Taglie bè .well-sm .well-lg
Ligami d'alerta .alert-link

Ciò chì hè cacciatu

I seguenti elementi sò stati abbandunati o cambiati in v3.0.

Elementu Eliminatu da 2.x 3.0 Equivalente
Forme azzione .form-actions N/A
Forma di ricerca .form-search N/A
Forme gruppu cù infurmazione .control-group.info N/A
Dimensioni di input di larghezza fissa .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Aduprà .form-controlè u sistema di griglia invece.
Ingressu di forma di livellu di bloccu .input-block-level Nisun equivalente direttu, ma i cuntrolli di forme sò simili.
Buttuni inversi .btn-inverse N/A
Fila fluida .row-fluid .row(micca più griglia fissa)
Cuntrolla wrapper .controls N/A
Fila di cuntrollu .controls-row .rowo.form-group
Navbar interna .navbar-inner N/A
Navbar divisori verticali .navbar .divider-vertical N/A
Sottomenu a discesa .dropdown-submenu N/A
Allineamenti di tabulazione .tabs-left .tabs-right .tabs-below N/A
Zona di tabulazione basata in pillola .pill-content .tab-content
Riquadro di zona di tabulazione basatu in pillola .pill-pane .tab-pane
liste di navigazione .nav-list .nav-header Nisun equivalente direttu, ma i gruppi di lista è .panel-groups sò simili.
Aiutu in linea per i cuntrolli di forma .help-inline Nisun equivalente esatta, ma .help-blockhè simile.
Culori di prugressu senza barra .progress-info .progress-success .progress-warning .progress-danger Aduprà .progress-bar-*invece .progress-bar.

Note supplementari

Altri cambiamenti in v3.0 ùn sò micca immediatamente apparenti. E classi di basa, i stili chjave è i cumpurtamenti sò stati adattati per a flessibilità è u nostru primu approcciu mobile . Eccu una lista parziale:

  • Per automaticamente, i cuntrolli di forma basati in testu ricevenu solu un stilu minimu. Per i culori di focu è i cantoni arrotondati, applicà a .form-controlclassa nantu à l'elementu à u stilu.
  • I cuntrolli di forma basati in testu cù a .form-controlclassa applicata sò oghji 100% larga per difettu. Imbulighjate l'inputs à l'internu <div class="col-*"></div>per cuntrullà a larghezza di input.
  • .badgeùn hà più classi cuntestuali (-success,-primary, etc..).
  • .btnci vole dinù aduprà .btn-defaultpè ottene u buttone "default".
  • .rowavà hè fluidu.
  • L'imaghjini ùn sò più responsive per difettu. Aduprà per a dimensione .img-responsivedi fluidu .<img>
  • L'icone, avà .glyphicon, sò avà basate nantu à fonti. L'icone necessitanu ancu una basa è una classe di icone (per esempiu .glyphicon .glyphicon-asterisk).
  • Typeahead hè stata abbandunata, in favore di utilizà Twitter Typeahead .
  • U marcatu modale hè cambiatu significativamente. I .modal-header, .modal-body, è e .modal-footerrùbbriche sò avà impannillati .modal-contentè .modal-dialogper un megliu stilu è cumpurtamentu mobile. Inoltre, ùn deve più dumandà .hideà .modalin u vostru marcatu.
  • Da v3.1.0, l'HTML caricatu da l' remoteopzione modale hè avà injected in u .modal-content(da v3.0.0 à v3.0.3, in u .modal) invece di in u .modal-body. Questu permette ancu di varià facilmente l'intestazione è u pede di u modale, micca solu u corpu modale.
  • A casella di verificazione è e funzioni di radiu di u plugin button.js avà usanu tramindui data-toggle="buttons"invece di data-toggle="buttons-checkbox"o data-toggle="buttons-radio"in u so marcatu.
  • L'avvenimenti JavaScript sò namespaced. Per esempiu, per trattà l'avvenimentu modale "mostra", utilizate 'show.bs.modal'. Per tabulazioni "mostrate" utilizate 'shown.bs.tab', etc.

Per più infurmazione nantu à l'aghjurnamentu à v3.0, è frammenti di codice da a cumunità, vede Bootply .