8/10/2016

1.6.ActualizacindeBootstrap2.Xa3.0(Bootstrap3,elmanualoficial)

Ver ndice de contenidos del libro

1.6. Actualizacin de Bootstrap 2.X a 3.0

Esta seccin est pensada para aquellos diseadores que quieren actualizar sus proyectos a Bootstrap 3 desde la anterior versin.
Adems de mencionar los cambios ms 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

.containerfluid

.container

.rowfluid

.row

.span*

.colmd*

.offset*

.colmdoffset*

.brand

.navbarbrand

.navcollapse

.navbarcollapse

.navtoggle

.navbartoggle

.btnnavbar

.navbarbtn

.herounit

.jumbotron

.icon*

.glyphicon.glyphicon*

.btn

.btn.btndefault

.btnmini

.btnxs

.btnsmall

.btnsm

.btnlarge

.btnlg

.visiblephone

.visiblesm

.visibletablet

.visiblemd

.visibledesktop

.visiblelg

.hiddenphone

.hiddensm

.hiddentablet

.hiddenmd

.hiddendesktop

.hiddenlg

.inputsmall

.inputsm

.inputlarge

.inputlg

.checkbox.inline.radio.inline

.checkboxinline .radioinline

.inputprepend.inputappend

.inputgroup

.addon

.inputgroupaddon

Clase de Bootstrap 2.x

Clase de Bootstrap 3.0

.thumbnail

.imgthumbnail

ul.unstyled

.listunstyled

ul.inline

.listinline

1.6.2. Nuevos elementos

http://librosweb.es/libro/bootstrap_3/capitulo_1/actualizacion_de_bootstrap_2x_a_30.html

1/4

8/10/2016

1.6.ActualizacindeBootstrap2.Xa3.0(Bootstrap3,elmanualoficial)

1.6.2. Nuevos elementos

Bootstrap 3 aade nuevos elementos y cambia algunos de los ya existentes. La siguiente tabla resume las clases CSS que se han
aadido o modicado.
Elemento
Paneles

Clases CSS
.panel.paneldefault .panelbody .paneltitle .panelheading .panelfooter .panel
collapse

Grupos de listas

.listgroup .listgroupitem .listgroupitemtext .listgroupitemheading

Glyphicons

.glyphicon

Jumbotron

.jumbotron

Rejilla diminuta (<768 px)

.colxs*

Rejilla pequea (>768 px)

.colsm*

Rejilla mediana (>992 px)

.colmd*

Rejilla grande (>1200 px)

.collg*

Mrgenes

.colsmoffset* .colmdoffset* .collgoffset*

Desplazamiento hacia la derecha

.colsmpush* .colmdpush* .collgpush*

Desplazamiento hacia la
izquierda

.colsmpull* .colmdpull* .collgpull*

Grupos de <input>

.inputgroup .inputgroupaddon .inputgroupbtn

Controles de formulario

.formcontrol .formgroup

Grupos de botones

.btngroupxs .btngroupsm .btngrouplg

Texto de los .navbar

.navbartext

Cabecera de los .navbar

.navbarheader

Pestaas justicadas

.navjustified

Imgenes responsive

.imgresponsive

Filas de tabla contextuales

.success .danger .warning .active

Paneles contextuales

.panelsuccess .paneldanger .panelwarning .panelinfo

Ventanas modales

.modaldialog .modalcontent

Imgenes en miniatura

.imgthumbnail

Elementos .well

.wellsm .welllg

Enlaces de alerta

.alertlink

1.6.3.
Elementos eliminados
Elemento existente en 2.x

Equivalente en 3.0
Los siguientes elementos se han eliminado o han cambiado en Bootstrap 3.
Elemento existente en 2.x

Equivalente en 3.0

.formactions

(no existe)

.formsearch

(no existe)

.containerfluid

.container (ahora todas las rejillas son uidas)

.rowfluid

.row (ahora todas las rejillas son uidas)

.navbarinner

(no existe)

.dropdownsubmenu

(no existe)

.tabsleft .tabsright .tabsbelow (no existe)

http://librosweb.es/libro/bootstrap_3/capitulo_1/actualizacion_de_bootstrap_2x_a_30.html

2/4

8/10/2016
.tabsleft .tabsright .tabsbelow

1.6.ActualizacindeBootstrap2.Xa3.0(Bootstrap3,elmanualoficial)
(no existe)

1.6.4. Otros cambios importantes

Bootstrap 3 incluye decenas de pequeos cambios que al principio pueden pasar desapercibidos. Todos los estilos y
comportamientos principales de Bootstrap se han ajustado para que sean ms exibles y encajen en la nueva estrategia "mobile
rst" en la que lo ms importante son los dispositivos mviles.
Los campos de formulario de texto ahora tienen una anchura del 100%. Para controlar su anchura, encirralos con la etiqueta
<divclass="col*"></div> .
La clase .badge ya no tiene sujos semnticos ( success , primary ,etc.).
El botn con aspecto normal requiere, adems de la clase .btn , la clase .btndefault .
Tanto .container como .row ahora se comportan de forma uda porque estn basados en porcentajes.
Las imgenes ya no son responsive por defecto. Aade la clase .imgresponsive para convertir una imagen en responsive.
Los iconos, que ahora utilizan la clase .glyphicon , se crean con una fuente especial y no con imgenes. Cada icono requiere una
clase CSS genrica y otra especca. Para mostrar por ejemplo el icono de un asterisco tienes que utilizar las siguientes clases:
.glyphicon.glyphiconasterisk .
El componente Typeahead se ha eliminado y ahora se utiliza Twitter Typeahead (http://twitter.github.io/typeahead.js/).
El cdigo HTML de los elementos modales ha cambiado mucho. Las secciones .modalheader , .modalbody y .modalfooter ahora
se encierran con las clases .modalcontent y .modaldialog para mejorar su aspecto en los mviles.
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 pestaas se utiliza shown.bs.tab , etc.
El sitio web Bootply (http://bootply.com/) dispone de ms informacin y ejemplos de cdigo para actualizar de Bootstrap 2 a
Bootstrap 3.

Anterior

Siguiente

1.5. Desactivando el diseo responsive

1.7. Compatibilidad con los navegadores

(../capitulo_1/desactivando_el_diseno_responsive.html)
(../capitulo_1/compatibilidad_con_los_navegadores.html)

INDICE DE CONTENIDOS
Captulo 1. Primeros pasos (../capitulo_1.html)
1.2. Contenidos de Bootstrap (../capitulo_1/contenidos_de_bootstrap.html)
1.3. La primera plantilla Bootstrap (../capitulo_1/la_primera_plantilla_bootstrap.html)
1.4. La comunidad Bootstrap (../capitulo_1/la_comunidad_bootstrap.html)
1.5. Desactivando el diseo responsive (../capitulo_1/desactivando_el_diseno_responsive.html)
1.6. Actualizacin de Bootstrap 2.X a 3.0 (../capitulo_1/actualizacion_de_bootstrap_2x_a_30.html)
1.7. Compatibilidad con los navegadores (../capitulo_1/compatibilidad_con_los_navegadores.html)
1.8. Accesibilidad (../capitulo_1/accesibilidad.html)
1.9. La licencia de Bootstrap (../capitulo_1/la_licencia_de_bootstrap.html)
1.10. Personalizando Bootstrap (../capitulo_1/personalizando_bootstrap.html)
2. Diseando con rejilla (../capitulo_2.html)
3. Tipografa (../capitulo_3.html)
4. Elementos CSS (../capitulo_4.html)
5. Formularios (../capitulo_5.html)
6. Componentes (../capitulo_6.html)
7. Plugins de JavaScript (../capitulo_7.html)

2006-2016 LibrosWeb.es Contacto (/sitio/contacto)

Novedades (https://plus.google.com/+librosweb)

http://librosweb.es/libro/bootstrap_3/capitulo_1/actualizacion_de_bootstrap_2x_a_30.html

Condiciones (/sitio/condiciones)

Privacidad (/sitio/privacidad)

3/4

8/10/2016
2006-2016 LibrosWeb.es Contacto (/sitio/contacto)

1.6.ActualizacindeBootstrap2.Xa3.0(Bootstrap3,elmanualoficial)
Novedades (https://plus.google.com/+librosweb)

Condiciones (/sitio/condiciones)

Privacidad (/sitio/privacidad)

3.588

das online

http://librosweb.es/libro/bootstrap_3/capitulo_1/actualizacion_de_bootstrap_2x_a_30.html

4/4