Ver índice de contenidos del libro

1.6. Actualización de Bootstrap 2.X a 3.0

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 .badge ya 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 .container como .row ahora 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-responsive para 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-body y .modal-footer ahora se encierran con las clases .modal-content y .modal-dialog para mejorar su aspecto en los móviles.
  • Los eventos de JavaScript ahora usan namespaces. Para utilizar por ejemplo el evento show de un elemento modal, utiliza el evento show.bs.modal; para el evento shown de las pestañas se utiliza shown.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.