Migración de 2.x a 3.0

Bootstrap 3 no es compatible con versiones anteriores como la v2.x. Utilice esta sección como una guía general para actualizar de v2.x a v3.0. Si desea una visión más general, revise lo nuevo del anuncio del lanzamiento de v3.0.

Cambios de la clase principal

En este cuadro, se pueden ver los cambios entre v2.x y 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-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Dividir en .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dividir 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

Lo nuevo

Hemos agregado elementos nuevos y cambiado algunos ya existentes. Estos son los estilos nuevos o actualizados.

Elemento Descripción
Paneles .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Grupos de listas .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Cuadrícula muy pequeña ( .col-xs-*
Cuadrícula pequeña (≥768px) .col-sm-*
Cuadrícula mediana (≥992px) .col-md-*
Cuadrícula grande (≥1200px) .col-lg-*
Clases de utilitarios de reacciones (≥1200px) .visible-lg .hidden-lg
Desplazamientos .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Inserción .col-sm-push-* .col-md-push-* .col-lg-push-*
Extracción .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input height sizes .input-sm .input-lg
Grupos de datos de digitación .input-group .input-group-addon .input-group-btn
Controles de la forma .form-control .form-group
Tamaños de grupos de botones .btn-group-xs .btn-group-sm .btn-group-lg
Texto barra nav. .navbar-text
Encabezado barra nav. .navbar-header
Fichas / comprimidos justificados .nav-justified
Imágenes con respuestas .img-responsive
Filas de cuadro contextual .success .danger .warning .active .info
Paneles contextuales .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imagen miniatura .img-thumbnail
Tamaños de pozos .well-sm .well-lg
Enlaces de alerta .alert-link

Lo que se quitó

En la versión 3.0, se han eliminado o modificado los siguientes elementos.

Elemento Quitado a partir de 2.x Equivalente de 3.0
Acciones de forma .form-actions No disp.
Forma de búsqueda .form-search No disp.
Formar grupos con info .control-group.info No disp.
Fixed-width input sizes .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead.
Block level form input .input-block-level No direct equivalent, but forms controls are similar.
Inverse buttons .btn-inverse No disp.
Fila de fluído .row-fluid .row (no more fixed grid)
Controla contenedor .controls No disp.
Controla la fila .controls-row .row or .form-group
Barra nav. interior .navbar-inner No disp.
Divisores verticales de barra de navegación .navbar .divider-vertical No disp.
Submenú desplegable .dropdown-submenu No disp.
Alineaciones de tabulado .tabs-left .tabs-right .tabs-below No disp.
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Listas de navegación .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

Notas adicionales

Otros cambios de v3.0 no son aparentes inmediatamente. Las clases básicas, estilos clave y comportamientos se han ajustado para lograr la flexibilidad y nuestro enfoque de priorizar los móviles. Esta es la lista parcial:

  • De forma predeterminada, los controles de forma basados en texto ahora solamente reciben un estilo mínimo. Si desea colores de enfoque y esquinas redondeadas, aplique la clase .form-control al elemento para estilizarlo.
  • Los controles de forma basados en texto con la clase .form-control aplicada ahora son 100 % anchos de forma predeterminada. Envuelva los ítems de entrada en <div class="col-*"></div> para controlar los anchos de entrada.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Las imágenes no reaccionan, de forma predeterminada. Utilice .img-responsive si desea tamaños de <img> fluidos.
  • Los iconos, now .glyphicon, se basan ahora en fuentes. Los iconos también requieren una clase de base y de icono (por ejemplo: .glyphicon .glyphicon-asterisk).
  • Ya no se usa typeahead (memoria de tecleado), y más bien se optó por Typeahead de Twitter.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
  • Los eventos de JavaScript son de espacios de nombre,. Por ejemplo, para manejar el evento modal "mostrar", utilice 'show.bs.modal'. Para las fichas mostradas utilice 'shown.bs.tab', etc.

Si desea mayor información sobre actualizar a v3.0, y fragmentos de código de la comunidad, vea Bootply.