Migrazione da 2.x a 3.0

Bootstrap 3 non è retrocompatibile con v2.x. Utilizzare questa sezione come guida generale per l'aggiornamento da v2.x a v3.0. Per una panoramica più ampia, vedere le novità nell'annuncio di rilascio della v3.0.

Grandi cambiamenti di classe

Questa tabella mostra le modifiche di stile tra v2.xe 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 in.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dividi 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

Cosa c'è di nuovo

Abbiamo aggiunto nuovi elementi e modificato alcuni esistenti. Ecco gli stili nuovi o aggiornati.

Elemento Descrizione
Pannelli .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Elenca i gruppi .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glificoni .glyphicon
Jumbotron .jumbotron
Griglia extra piccola (<768px) .col-xs-*
Griglia piccola (≥768px) .col-sm-*
Griglia media (≥992px) .col-md-*
Griglia grande (≥1200px) .col-lg-*
Classi di utilità reattive (≥1200px) .visible-lg .hidden-lg
Compensazioni .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Spingere .col-sm-push-* .col-md-push-* .col-lg-push-*
Tiro .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Immettere le dimensioni dell'altezza .input-sm .input-lg
Gruppi di input .input-group .input-group-addon .input-group-btn
Controlli dei moduli .form-control .form-group
Dimensioni dei gruppi di pulsanti .btn-group-xs .btn-group-sm .btn-group-lg
Testo della barra di navigazione .navbar-text
Intestazione della barra di navigazione .navbar-header
Schede / pillole giustificate .nav-justified
Immagini reattive .img-responsive
Righe contestuali della tabella .success .danger .warning .active .info
Pannelli contestuali .panel-success .panel-danger .panel-warning .panel-info
Modale .modal-dialog .modal-content
Immagine in miniatura .img-thumbnail
Buone dimensioni .well-sm .well-lg
Collegamenti di avviso .alert-link

Cosa è stato rimosso

I seguenti elementi sono stati eliminati o modificati nella v3.0.

Elemento Rimosso da 2.x 3.0 equivalente
Azioni di forma .form-actions N / A
Modulo di ricerca .form-search N / A
Gruppo di moduli con informazioni .control-group.info N / A
Dimensioni di input a larghezza fissa .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Utilizzare invece il sistema a.form-control griglia .
Input del modulo a livello di blocco .input-block-level Nessun equivalente diretto, ma i controlli dei moduli sono simili.
Bottoni invertiti .btn-inverse N / A
Fila fluida .row-fluid .row(non più griglia fissa)
Controlla il wrapper .controls N / A
Riga dei controlli .controls-row .rowo.form-group
Barra di navigazione interna .navbar-inner N / A
Divisori verticali della barra di navigazione .navbar .divider-vertical N / A
Sottomenu a discesa .dropdown-submenu N / A
Allineamenti delle schede .tabs-left .tabs-right .tabs-below N / A
Area tabulabile basata su pillola .pill-content .tab-content
Riquadro dell'area tabulabile basato su pillola .pill-pane .tab-pane
Liste di navigazione .nav-list .nav-header Nessun equivalente diretto, ma i gruppi di elenchi e .panel-groups sono simili.
Guida in linea per i controlli dei moduli .help-inline Nessun equivalente esatto, ma .help-blockè simile.
Colori di avanzamento non a livello di barra .progress-info .progress-success .progress-warning .progress-danger Utilizzare .progress-bar-*invece .progress-bar.

Note aggiuntive

Altre modifiche nella v3.0 non sono immediatamente evidenti. Le classi base, gli stili chiave e i comportamenti sono stati adattati alla flessibilità e al nostro approccio mobile first . Ecco un elenco parziale:

  • Per impostazione predefinita, i controlli dei moduli basati su testo ora ricevono solo uno stile minimo. Per i colori di messa a fuoco e gli angoli arrotondati, applica la .form-controlclasse sull'elemento allo stile.
  • I controlli dei moduli basati su testo con la .form-controlclasse applicata ora sono larghi al 100% per impostazione predefinita. Avvolgi gli input all'interno <div class="col-*"></div>per controllare le larghezze di input.
  • .badgenon ha più classi contestuali (-success,-primary, ecc..).
  • .btndeve anche utilizzare .btn-defaultper ottenere il pulsante "predefinito".
  • .rowora è fluido.
  • Le immagini non sono più reattive per impostazione predefinita. Utilizzare .img-responsiveper la dimensione del fluido <img>.
  • Le icone, ora .glyphicon, sono ora basate sui caratteri. Le icone richiedono anche una classe base e icona (ad es .glyphicon .glyphicon-asterisk. ).
  • Typeahead è stato abbandonato, a favore dell'utilizzo di Twitter Typeahead .
  • Il markup modale è cambiato in modo significativo. Le sezioni .modal-header, .modal-body, e sono ora racchiuse in e per un migliore stile e comportamento mobile. Inoltre, non dovresti più applicare nel tuo markup..modal-footer.modal-content.modal-dialog.hide.modal
  • A partire dalla v3.1.0, l'HTML caricato remotedall'opzione modale viene ora iniettato nel .modal-content(dalla v3.0.0 alla v3.0.3, nel .modal) invece che nel .modal-body. Ciò consente anche di variare facilmente l'intestazione e il piè di pagina del modale, non solo il corpo modale.
  • La casella di controllo e le funzionalità radio del plug-in button.js ora usano entrambe data-toggle="buttons"al posto data-toggle="buttons-checkbox"o data-toggle="buttons-radio"nel loro markup.
  • Gli eventi JavaScript hanno uno spazio dei nomi. Ad esempio, per gestire l'evento modale "show", utilizzare 'show.bs.modal'. Per le schede "mostrate" utilizzare 'shown.bs.tab', ecc.

Per ulteriori informazioni sull'aggiornamento alla v3.0 e frammenti di codice dalla community, vedere Bootply .