Esta sección está pensada para aquellos diseñadores que quieren actualizar sus proyectos a Bootstrap 3 desde la anterior versión. Además de mencionar los cambios más importantes, se incluyen varias tablas sobre la equivalencia entre Bootstrap 2 y 3.
1.6.1. Principales cambios en las clases CSS
| Clase de Bootstrap 2.x | Clase de Bootstrap 3.0 |
|---|---|
.container-fluid |
.container |
.row-fluid |
.row |
.span* |
.col-md-* |
.offset* |
.col-md-offset-* |
.brand |
.navbar-brand |
.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 |
.visible-phone |
.visible-sm |
.visible-tablet |
.visible-md |
.visible-desktop |
.visible-lg |
.hidden-phone |
.hidden-sm |
.hidden-tablet |
.hidden-md |
.hidden-desktop |
.hidden-lg |
.input-small |
.input-sm |
.input-large |
.input-lg |
.checkbox.inline .radio.inline |
.checkbox-inline .radio-inline |
.input-prepend .input-append |
.input-group |
.add-on |
.input-group-addon |
.thumbnail |
.img-thumbnail |
ul.unstyled |
.list-unstyled |
ul.inline |
.list-inline |
1.6.2. Nuevos elementos
Bootstrap 3 añade nuevos elementos y cambia algunos de los ya existentes. La siguiente tabla resume las clases CSS que se han añadido o modificado.
| Elemento | Clases CSS |
|---|---|
| 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 |
| Rejilla diminuta (<768 px) | .col-xs-* |
| Rejilla pequeña (>768 px) | .col-sm-* |
| Rejilla mediana (>992 px) | .col-md-* |
| Rejilla grande (>1200 px) | .col-lg-* |
| Márgenes | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Desplazamiento hacia la derecha | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Desplazamiento hacia la izquierda | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Grupos de <input> |
.input-group .input-group-addon .input-group-btn |
| Controles de formulario | .form-control .form-group |
| Grupos de botones | .btn-group-xs .btn-group-sm .btn-group-lg |
Texto de los .navbar |
.navbar-text |
Cabecera de los .navbar |
.navbar-header |
| Pestañas justificadas | .nav-justified |
| Imágenes responsive | .img-responsive |
| Filas de tabla contextuales | .success .danger .warning .active |
| Paneles contextuales | .panel-success .panel-danger .panel-warning .panel-info |
| Ventanas modales | .modal-dialog .modal-content |
| Imágenes en miniatura | .img-thumbnail |
Elementos .well |
.well-sm .well-lg |
| Enlaces de alerta | .alert-link |
1.6.3. Elementos eliminados
Los siguientes elementos se han eliminado o han cambiado en Bootstrap 3.
| Elemento existente en 2.x | Equivalente en 3.0 |
|---|---|
.form-actions |
(no existe) |
.form-search |
(no existe) |
.container-fluid |
.container (ahora todas las rejillas son fluidas) |
.row-fluid |
.row (ahora todas las rejillas son fluidas) |
.navbar-inner |
(no existe) |
.dropdown-submenu |
(no existe) |
.tabs-left .tabs-right .tabs-below |
(no existe) |
1.6.4. Otros cambios importantes
Bootstrap 3 incluye decenas de pequeños cambios que al principio pueden pasar desapercibidos. Todos los estilos y comportamientos principales de Bootstrap se han ajustado para que sean más flexibles y encajen en la nueva estrategia "mobile first" en la que lo más importante son los dispositivos móviles.
- Los campos de formulario de texto ahora tienen una anchura del 100%. Para controlar su anchura, enciérralos con la etiqueta
<div class="col-*"></div>. - La clase
.badgeya no tiene sufijos semánticos (-success,-primary,etc.). - El botón con aspecto normal requiere, además de la clase
.btn, la clase.btn-default. - Tanto
.containercomo.rowahora se comportan de forma fluída porque están basados en porcentajes. - Las imágenes ya no son responsive por defecto. Añade la clase
.img-responsivepara convertir una imagen en responsive. - Los iconos, que ahora utilizan la clase
.glyphicon, se crean con una fuente especial y no con imágenes. Cada icono requiere una clase CSS genérica y otra específica. Para mostrar por ejemplo el icono de un asterisco tienes que utilizar las siguientes clases:.glyphicon .glyphicon-asterisk. - El componente Typeahead se ha eliminado y ahora se utiliza Twitter Typeahead.
- El código HTML de los elementos modales ha cambiado mucho. Las secciones
.modal-header,.modal-bodyy.modal-footerahora se encierran con las clases.modal-contenty.modal-dialogpara mejorar su aspecto en los móviles. - Los eventos de JavaScript ahora usan namespaces. Para utilizar por ejemplo el evento
showde un elemento modal, utiliza el eventoshow.bs.modal; para el eventoshownde las pestañas se utilizashown.bs.tab, etc.
El sitio web Bootply dispone de más información y ejemplos de código para actualizar de Bootstrap 2 a Bootstrap 3.