Migración de 2.x a 3.0

Bootstrap 3 no es retrocompatible con v2.x. Utilice esta sección como guía general para actualizar de v2.x a v3.0. Para obtener una descripción general más amplia, consulte las novedades en el anuncio de lanzamiento de v3.0.

Grandes cambios de clase

Esta tabla muestra los cambios de estilo 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 .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Dividido en.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Dividido 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

Qué hay de nuevo

Hemos añadido nuevos elementos y cambiado algunos existentes. Aquí están 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
Glificones .glyphicon
jumbotron .jumbotron
Cuadrícula extra pequeña (<768px) .col-xs-*
Cuadrícula pequeña (≥768px) .col-sm-*
Cuadrícula mediana (≥992px) .col-md-*
Cuadrícula grande (≥1200px) .col-lg-*
Clases de utilidad receptivas (≥1200px) .visible-lg .hidden-lg
Compensaciones .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Empujar .col-sm-push-* .col-md-push-* .col-lg-push-*
Jalar .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Tamaños de altura de entrada .input-sm .input-lg
Grupos de entrada .input-group .input-group-addon .input-group-btn
Controles de formulario .form-control .form-group
Tamaños de grupos de botones .btn-group-xs .btn-group-sm .btn-group-lg
Texto de la barra de navegación .navbar-text
Encabezado de la barra de navegación .navbar-header
Pestañas/píldoras justificadas .nav-justified
Imágenes receptivas .img-responsive
Filas de la tabla contextual .success .danger .warning .active .info
Paneles contextuales .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imagen en miniatura .img-thumbnail
Tamaños de pozo .well-sm .well-lg
Enlaces de alerta .alert-link

lo que se elimina

Los siguientes elementos se han eliminado o cambiado en v3.0.

Elemento Eliminado de 2.x 3.0 equivalente
Acciones de formulario .form-actions N / A
Formulario de búsqueda .form-search N / A
Formar grupo con info .control-group.info N / A
Tamaños de entrada de ancho fijo .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Utilice .form-controly el sistema de cuadrícula en su lugar.
Entrada de formulario de nivel de bloque .input-block-level No hay equivalente directo, pero los controles de formularios son similares.
Botones inversos .btn-inverse N / A
fila fluida .row-fluid .row(no más cuadrícula fija)
Envoltura de controles .controls N / A
Fila de controles .controls-row .rowo.form-group
barra de navegación interna .navbar-inner N / A
Divisores verticales de la barra de navegación .navbar .divider-vertical N / A
Submenú desplegable .dropdown-submenu N / A
Alineaciones de pestañas .tabs-left .tabs-right .tabs-below N / A
Área de tabulación basada en píldoras .pill-content .tab-content
Panel de área con pestañas basado en píldoras .pill-pane .tab-pane
Listas de navegación .nav-list .nav-header No hay equivalente directo, pero los grupos de listas y .panel-groups son similares.
Ayuda en línea para controles de formulario .help-inline No tiene un equivalente exacto, pero .help-blockes similar.
Colores de progreso sin nivel de barra .progress-info .progress-success .progress-warning .progress-danger Usar .progress-bar-*en el .progress-barlugar.

Notas adicionales

Otros cambios en v3.0 no son evidentes de inmediato. Las clases base, los estilos clave y los comportamientos se han ajustado para brindar flexibilidad y nuestro primer enfoque móvil . Aquí hay una lista parcial:

  • De forma predeterminada, los controles de formulario basados ​​en texto ahora reciben solo un estilo mínimo. Para colores de enfoque y esquinas redondeadas, aplique la .form-controlclase en el elemento al estilo.
  • Los controles de formulario basados ​​en texto con la .form-controlclase aplicada ahora tienen un 100 % de ancho de forma predeterminada. Envuelva las entradas dentro <div class="col-*"></div>para controlar los anchos de entrada.
  • .badgeya no tiene clases contextuales (-success,-primary,etc..).
  • .btntambién debe usar .btn-defaultpara obtener el botón "predeterminado".
  • .rowahora es fluido.
  • Las imágenes ya no responden de forma predeterminada. Uso .img-responsivepara tamaño de líquido <img>.
  • Los íconos ahora .glyphiconestán basados ​​en fuentes. Los iconos también requieren una base y una clase de icono (p. ej .glyphicon .glyphicon-asterisk., ).
  • Se ha eliminado la escritura anticipada, a favor del uso de la escritura anticipada de Twitter .
  • El marcado modal ha cambiado significativamente. Las secciones .modal-header, .modal-bodyy .modal-footerahora están envueltas en .modal-contenty .modal-dialogpara un mejor estilo y comportamiento móvil. Además, ya no debería aplicar .hideen .modalsu marcado.
  • A partir de la v3.1.0, el código HTML cargado por la remoteopción modal ahora se inyecta en .modal-content(de v3.0.0 a v3.0.3, en .modal) en lugar de en .modal-body. Esto le permite variar fácilmente el encabezado y el pie de página del modal, no solo el cuerpo del modal.
  • Las funciones de casilla de verificación y radio del complemento button.js ahora se usan data-toggle="buttons"en lugar de data-toggle="buttons-checkbox"o data-toggle="buttons-radio"en su marcado.
  • Los eventos de JavaScript tienen espacios de nombres. Por ejemplo, para manejar el evento modal "mostrar", use 'show.bs.modal'. Para las pestañas "mostradas", use 'shown.bs.tab', etc.

Para obtener más información sobre la actualización a v3.0 y fragmentos de código de la comunidad, consulte Bootply .