Migrando desde 2.x a 3.0

Bootstrap 3 no es compatible con versiones anteriores de v2.x. Use esta sección como una guía general para actualizar desde v2.x a v3.0. Para una visión general más amplia, consulte qué hay de nuevo en el anuncio de lanzamiento de v3.0.

Cambios importantes de clases

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 agregado 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 lista .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Cuadrícula extra pequeña (<768px) .col-xs-*
Cuadrícula pequeña (≥768px) .col-sm-*
Cuadrícula media (≥992px) .col-md-*
Cuadrícula grande (≥1200px) .col-lg-*
Clases de utilidad responsiva (≥1200px) .visible-lg .hidden-lg
Desplazamientos .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Empujar .col-sm-push-* .col-md-push-* .col-lg-push-*
Tirar .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 barra de navegación .navbar-text
Encabezado de barra de navegación .navbar-header
Pestañas / píldoras justificadas .nav-justified
Imágenes responsivas .img-responsive
Filas de tabla contextuales .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 well .well-sm .well-lg
Enlaces de alerta .alert-link

Qué se ha eliminado

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

Elemento Eliminado de 2.x Equivalente en 3.0
Acciones de formulario .form-actions N/A
Formulario de búsqueda .form-search N/A
Grupo de formulario con información .control-group.info N/A
Tamaños de entrada de ancho fijo .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control y el sistema de cuadrícula en su lugar.
Entrada de formulario a nivel de bloque .input-block-level Sin equivalente directo, pero los controles de formulario son similares.
Botones inversos .btn-inverse N/A
Fila fluida .row-fluid .row (ya no hay cuadrícula fija)
Contenedor de controles .controls N/A
Fila de controles .controls-row .row o .form-group
Interior de barra de navegación .navbar-inner N/A
Divisores verticales de 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 tabulable basada en píldoras .pill-content .tab-content
Panel de área tabulable basada en píldoras .pill-pane .tab-pane
Listas de navegación .nav-list .nav-header Sin equivalente directo, pero los grupos de lista y las .panel-groups son similares.
Ayuda en línea para controles de formulario .help-inline Sin equivalente exacto, pero .help-block es similar.
Colores de progreso no a nivel de barra .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* en el .progress-bar en su lugar.

Notas adicionales

Otros cambios en v3.0 no son inmediatamente aparentes. Las clases base, estilos clave y comportamientos se han ajustado para flexibilidad y nuestro enfoque móvil primero. Aquí hay una lista parcial:

  • Por defecto, los controles de formulario basados en texto ahora reciben solo un estilo mínimo. Para colores de enfoque y esquinas redondeadas, aplique la clase .form-control en el elemento para dar estilo.
  • Los controles de formulario basados en texto con la clase .form-control aplicada ahora tienen un ancho del 100% por defecto. Envuelva las entradas dentro de <div class="col-*"></div> para controlar los anchos de entrada.
  • .badge ya no tiene clases contextuales (-success,-primary,etc..).
  • .btn también debe usar .btn-default para obtener el botón "predeterminado".
  • .row ahora es fluido.
  • Las imágenes ya no son responsivas por defecto. Use .img-responsive para tamaño de <img> fluido.
  • Los iconos, ahora .glyphicon, ahora están basados en fuentes. Los iconos también requieren una clase base y de icono (por ejemplo, .glyphicon .glyphicon-asterisk).
  • Typeahead se ha eliminado, a favor de usar Twitter Typeahead.
  • El marcado de modal ha cambiado significativamente. Las secciones .modal-header, .modal-body y .modal-footer ahora están envueltas en .modal-content y .modal-dialog para un mejor estilo y comportamiento móvil. Además, ya no debe aplicar .hide a .modal en su marcado.
  • A partir de v3.1.0, el HTML cargado por la opción modal remote ahora se inyecta en el .modal-content (de v3.0.0 a v3.0.3, en el .modal) en lugar de en el .modal-body. Esto le permite también variar fácilmente el encabezado y el pie de página del modal, no solo el cuerpo del modal.
  • Las características de casilla de verificación y radio del plugin button.js ahora ambos usan data-toggle="buttons" en lugar de data-toggle="buttons-checkbox" o data-toggle="buttons-radio" en su marcado.
  • Los eventos de JavaScript tienen espacio de nombres. Por ejemplo, para manejar el evento modal "show", use 'show.bs.modal'. Para pestañas "shown" use 'shown.bs.tab', etc.

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