Saltear al contenido principal

Cómo migrar Bootstrap 3 a Bootstrap 4 (Guía en español)

guia-migrar-bootstrap-3-bootstrap-4

Pues antes de migrar a una nueva versión de bootstrap, necesitamos saber algunos puntos importantes al momento de la migración de una nueva versión de bootstrap para verificar que cambios, ventajas y desventajas podemos obtener.
Entonces. En esta oportunidad les voy a explicar que cambios debes saber y cuales son las nuevas características entre la versión de Bootstrap 3 y Bootstrap 4. Los cambios que necesitas realizar es renombrar y hacer algunas configuraciones.
Pero antes, debemos tener en claro estas preguntas que uno se hace antes de realizar una migración de versión de Bootstrap.

¿Debo migrar de Bootstrap 3 a Bootstrap 4? ¿Cuales son las diferencias?

Bootstrap ha sido uno de los frameworks front-end más confiables de todos los tiempos. Tiene un audiencia leal que se ha mantenido alrededor de la muy robusta versión “Mobile-first” saliente de todos los tiempos, es decir “Bootstrap 3”. Este abrumador lanzamiento tiene la responsabilidad de crear una de las comunidades más sólidas de la historia. Su sintaxis es bastante comprensible lo hace muy accesible. Todo lo que se requiere es el conocimiento básico de HTML y CSS.
La última versión estable de Boostrap fue en julio del 2016 con Boostrap v3.3.7. Y es solo el lanzamiento de vista previa de la versión Beta de Bootstrap 4.0.0 en agosto de 2017. Estos datos pueden ser muy justificado el hecho de que Bootstrap ha puesto mucho esfuerzo en términos de ofrecer los mejores resultados posibles. Si se observa de cerca, uno definitivamente va a señalar el hecho de que tienen sus dos versiones disponibles en el mercado. Aunque han supendido el trabajo en Bootstrap 3 para intesficar su trabajo en el desarrollo exclusivo de Boostrap 4.
Aún asi, siguen las preguntas sin respuestas, lo que hemos encontrado en muchas búsquedas de Google, es decir, ¿debo usar o mgirar a Boostrap 4? ¿debo aprender bootstrap 3 o bootstrap 4 en 2017?.
Estas preguntas repetitivas surgen cuando uno no está completamente al tanto de los cambios que se han llevado de una versión a otra.

Entonces… ¿Qué es lo que realmente ha cambiado en la nueva versión de Bootstrap 4? ¿Qué es lo novedoso que ofrece?

La última versión beta de bootstrap 4 se lanzó después de 2 años el 10 de agosto del 2017. Algunos podrían llamarla una reescritura de su código fuente, pero se difiere de muchos modos con sus predecesores. Algunos de ellos los voy a mencionar a continuación:

Navegación:

En Bootstrap 4, el componente de la navegación ha sido simplificada en una gran medida. Uno para crear una nueva lista de elementos empleando la última clase base de navegación. También hay algunas adiciones recientes, como la clase base de navegación. También hay algunas adiciones recientes, como la clase nav-link, la clase nav-item y los estilos de la barra de navegación.

Apariencia y perspectiva:

Aunque no hay ningún cambio drástico en la apariencia. Sin embargo, hay ciertos cambios conmovedores como el tamaño de implementación de fuente alterada, el color de contexto principal, el color de fondo. Además, el framework de bootstrap 4 se ha detenido en su envío de Glyphicons. Por lo tanto, es liviano y también requiere integración manual o alguna otra alternativa.

Reinicio (Reboot):

En la versión de Bootstrap 3 se había usado Normilize.css para que todos los elementos HTML tuvieran en orden una apariencia consistente. Ahora Boostrap 4 adoptó una versión mejorada de Normilize.css, es decir, un renicio consistente.

Flexbox:

Flexbox es uno de esos modelos de disposición que permite la formación de los diseños y estrucuturas complejas con facilidad. Se puede usar para escalar elementos o aplicar capacidades avanzadas de alineación, tanto horizontales como verticales. No reemplaza el diseño de página ya existente. El paso principal de Boostrap 4 hacia la mejora es su movimiento hacia la adopción de Flexbox.

Control de Formulario:

Boostrap 4 ofrece un formulario de control mejorado. Donde te permite lidiar con el control de entrada incoherente y su aparición en diferentes navegadores. Proporciona formularios personalizados también, en forma de casillas de verificación personalizadas y entradas de radio.

Desplegable (Dropdown):

En Boostrap 4, la clase dropbown debe aplicarse a cada elemento desplegable. De hecho, el símbolo de intercalación se agrega intuitivamente a los menús desplegables (dropdown y toogles) que se han agregado usando drop-down toogle class.

Paginación:

En Bootstrap 3, se creó un componente de paginación aplicando la clase de paginación a cualquier elemento ul. Ahora, Bootstrap 4 exige que se indique correctamente la paginación y que se vinculen los elementos mediante el elemento de página y la clase de enlace de página.

Plugins:

Al igual que en Bootstrap 3, los plugins se dividen en 2 categorías, nombrandolos, un archivo que incluye reglas de estilo y un archivo Javascript. No hay cambios conmovedores en cuanto a cómo se compilan los complementos en Bootstrap 4 cualquiera de los dos. En la última versión, las reglas de los estilos están compuestas por SASS. Mientras que los plugins están disponibles en el Jquery Object como un archivo Javascript que contiene una sección Jquery.

Compatibilidad de Navegador:

Bootstrap 4 ofrece su inmensa compatibilidad para todos los navegadores más importantes y reconocidos de todos los tiempos, como Safari, Chrome, Opera e Internet Explorer (i8 y más).

Clases de utilidad:

En Bootstrap 4, se han incluido nuevas clases de utilidad sin ninguna obstaculización de funcionalidad existente, en absoluto. Tales adiciones importantes son como las clases de alineación de texto responsive, responsive flotats y la responsive embedding. Aparte de ofrecer muchos accesos directos, estos respectivamente, te permiten cambiar la alineación de texto, el floating de los elementos y la escala del ratio de cualquier vídeo embebido.
Para ahorrarte el tiempo recorriendo y explicarte todos los registros de cambios, he recopilado una lista de las cosas que necesitas saber al momento de migrar desde Bootstrap 3 a Bootstrap 4.
Empezaremos a discutir los cambios hechos en el framework de Bootstrap 4 y cómo afectará el rendimiento de tu sitio web.
Entonces examinaremos la nueva forma de instalar bootstrap y cómo las unidad de mediciones de las grillas han cambiado y cómo el flexbox puede ayudar a los diseños responsive. También discutiremos los cambios en algunos de los componentes y tomaremos una mirada de lo qué pasa con JavaScript en la nueva versión.
Finalmente, veremos algunos de los nuevos componentes, que incluyen las llamadas tarjetas (cards), tooltips y flexbox. Si ya estás preparado para migrar tu sitio web de la versión anterior de bootstrap hacia bootstrap 4, entonces esta guía  será de gran ayuda.




Comencemos.

Cambios globales

Estos son los cambios globales en Bootstrap 4:

  • Cambio de Less a Sass por los archivos CSS de origen.
  • Cambió de px a rem como la unidad CSS principal.
  • Media queries ahora están en ems en lugar de en pxs.
  • El font-size global aumentó de 14px a 16px.

 

Componentes

Imágenes:

Se renombró elemento .img-responsive a .img-fluid
Se renombró elemento .img-round to .rounded
Se renombró elemento .img-circle a .rounded-circle

Tablas:

Las tablas responsive ya no requiere de un elemento de ajuste. En pocas palabras, en Bootstrap 3, se debe agregar .table-responsive class al padre <div>. Pero en Bootstrap 4, la clase .table-responsive se agregará al elemento <table>. Se agregó una nueva opción .table-inverse.
También se agregaron modificadores de encabezado de tabla: .thead-default y ...thead-reverse.
Se renombró el nombre de las clases contextuales por un table–prefix. por lo tanto, .active .success, .warning, .danger y .table-info a .table-active, .table-success, .table-warning, .table-danger y .table-info.
 

El Código fuente de Bootstrap

El código fuente de Bootstrap 3 incluye los recursos de CSS, JavaScript y fuentes precompilados, junto con la fuente Less, JavaScript y la documentación. Tiene la siguiente jerarquía de archivos.
estructura fuente bootstrap 3
En Bootstrap 4 alpha, la fuente Less fue reemplazada por archivos Sass debido a su migración de Less a Sass a través libSass. Como Bootstrap 4 ya no admite glyphicons, la carpeta de fuentes también se omitió. Bootstrap 4 tiene la siguiente jerarquía de archivos.
estructura fuente boostrap 4

Instalando Bootstrap 4

Bootstrap 4 ofrece una variedad de opciones para instalar. Bootstrap 4 Alpha justo acaba de lanzarse, así que no todos los paquetes tienen publicada la versión 4 alpha, pero sabemos que saldrá muy pronto.

boostrap 4 nueva version
Descargar Bootstrap 4 Alpha

 
Puedes elegir las opciones que desees según tus necesidades.
Recurso de archivos: Use Bootstrap descargando el paquete con los recursos zipeado completo que incluye Sass, JavaScript y archivos de documentación. Esto requiere un compilador Sass. un autoprefixer y algo de configuración interna. Si solo desea utilizar los archivos de bootstrap, puede copiar la ubicación del CSS y Javascript dentro de la etiqueta <link> en la parte superior de la sección <head> antes que todas las demás hojas de estilo para cargar el CSS.
CDN de Bootstrap: Use el CDN de Bootstrap, proporcionado gratuitamente por la gente MaxCDN. Copie el enlace dentro de la etiqueta <link> hacia sección su superior del <head> antes que todas las demás hojas de estilo para cargar el CSS.
Administrador de paquetes: Use un administrador de paquete como Bower, npm, meteor y un compositor para instalar Bootstrap. Esto requerirá un compilador Sass y un autoprefixer para una configuración que coincida con las versioens oficiales compiladas.
En el renicio (Reboot) incluye variables / mixins, Normalize y Reiniciar. Sin JavaScript.
En las grillas (grid) solo incluye variables | mixins y nuestro sistema de grillas. Sin Javascript.
En Flexbox incluye todo Bootstrap con Flexbox habilitado y menor compatibilidad con cualquier navegador.
 

Actualizaciones en el sistema de las grillas (grid)

El sistema de grillas en Bootstrap 4 sigue teniendo la misma sintaxis HTML, pero la unidad de medida cambia.
Por ejemplo, aún se puede usar el mismo marcado de grillas de 12 columnas y cuadrículas de nido.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Esto no es nuevo; Boostrap 3 utilizó las mismas clases. Sin embargo, las clases del nuevo Bootstrap 4 usaba ems, no pixeles y han agregado un nuevo nivel para pantallas extra grandes. Mira las clases junto con sus tamaños de pantalla.

  • col-xs para pantalla extra pequeña (ancho de pantalla inferior a 34em)
  • col-sm para una pantalla pequeña (ancho de pantalla 34em y superior)
  • col-md para una pantalla mediana (ancho de pantalla 48em y superior)
  • col-lg para una pantalla más grande (ancho de pantalla 62em y superior)
  • col-xl para una pantalla extra grande (ancho de pantalla 75em y superior)

 
Otra cosa digna para mencionar es la clase del contenedor y la fila (container, row). El contenedor tiene un ancho máximo establecido en rems, mientras que la fila tiene un margen izquierdo y derecho negativo de -.9375rem y un padding izquierdo y derecho de 0.9375 rem que fueron 15 px en Bootstrap 3.
Si bien puede ser una buena idea admitir todos los tamaños de pantalla, algunos diseñadores web y desarrolladores pueden tardar un tiempo en acostumbrarse, ya que la mayoría de los programas de diseños que se usan hoy en día, como Photoshop, utilizan píxeles en su diseño.
Si está utilizando los recursos de las versiones de Sass CSS de Bootstrap 4, puedes controlar los tamaños de la cuadrícula cambiando las siguientes variables:

  • $ grid-columns: Número de cuadrículas horizontalmente (12 por defecto)
  • $ grid-gutter-width: Un padding total alrededor de cada cuadrícula (valor por defecto 30 píxeles).
  • $ grid-float-breakpoint: Tamaño mínimo de la barra de navegación (navbar) se convierte en no colapsado ($ screen-sm-min por defecto).
  • $ grid-float-breakpoint-max: Tamaño máximo donde la barra de navegación (navbar) comienza a colapsarse (el valor por defecto sería el tamaño de $ grid-float-breakpoint – 1)

 

Restablecer las actualizaciones de los componentes

El archivo de Normalize.css de Nicolas Gallagher se usó en Bootstrap 3 para el restablecimiento de CSS y se mejoró en Bootstrap 4.
 
Usando el mismo archivo que ves en Bootstrap 3, agregaron algunos estilos de reinicio de una base de estilos que son prácticos y los comprimieron en un solo archivo y lo llamaron reboot.css. Por ejemplo, algunos estilos de <table> están personalizados por una simple linea base y luego proporcionan elementos .table, table-bordered, y otros más.

Actualizaciones y Cambio de Clases

Ha habido muy pocos cambios de nombre de clase entre las dos versiones, y algunas clases han sido retiradas.

La Tipografía

La tipografía de Bootstrap usa rems. A diferencia de px y em, no es una unidad fija o relativa que sea directa o más cercana a su medida principal. La unidad rem es dinámica y relativa a la etiqueta raíz del HTML. Sin embargo, aún puede usar px, em y pt en proyectos de Bootstrap si lo desea.
Para que te hagas una idea de como funcionan los rems, puedes dividir el objetivo en tamaño base del html en píxeles.
Digamos que tenemos el siguiente código.

html{
font-size: 16px;
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

En el ejemplo hemos establecido la etiqueta de párrafo en 1 rem que es equivalente a 16px como nuestro tamaño de raiz html. Mientras que la etiqueta h1 tendrá 1.875 rem si dividierás el tamaño del objetivo que es 30px al tamaño de la raíz htm de 16px.
Bootstrap 4 lleva las unidades de los rems hacia la escena para tener una escala 100% perfecta en toda la aplicación. Esto hace que sea más fácil escalar hacia arriba o hacia abajo para dispositivos. También vale la pena señalar que el tamaño de la etiqueta html puede ser personalizada a un tamaño de preferencia.

Tablas Contextuales de clases

Bootstrap 3 usa las clase contextual para poner un poco de color de fondo en las filas de la tabla o en las celdas individuales. A cambio en Bootstrap 4, agregaron el prefijo .table-* en cada clase contextual.
tablas contextuales clases bootstrap 3 y bootstrap 4
 
Tabla condensada renombrada
Bootstrap 3 usa la case .table-condensed para hacer una tabla más compacta al cortar el padding de la celda por la mitad. En Bootstrap 4, se renombró a .table-sm para conherencia.
Mira el ejemplo del código siguiente:

<table class="table table-striped">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

Al código anterior le gustará esto.
tablas condensadas bootstrap 4

Cambios en el Javascript

Bootstrap utiliza una gran cantidad de componentes de Javascript y al igual que en los componentes comunes, no hay muchos cambios, especialmente en la parte de javascript.
En ocasiones veremos algunos ajustes, pero en general el estado de codificación es bastante similar. Estos son algunos de los ajustes:
Drop Support para IE8: Ahora que se ha eliminado el soporte de Internet Explorer 8, es seguro usar jQuery 2.0, que es una versión más rápida que el jQuery 1.0.
Compatibilidad con ES6: todos los complementos se escribieron en ES6 y se compilaron con Babel, un compilador de JavaScript. Lo bueno de esto es que puede compilarse más rápido y mantenerse más fácil.
Se resuelven los problemas de AMD y UMD.

Nuevas características

La mayoría de los cambios se ha realizado para dar conformidad al esquema de denominación utilizado por varias clases, pero en esa parte, repasemos algunas de las principales características nuevas.

Tarjetas (Cards)

En Bootstrap 4, paneles, miniaturas y pozos fueron eliminados y reemplazados con tarjetas. Este componente se puede usar para mostrar información como una página o un contenedor que admite diferentes tipos de contenido, como enlaces, texto, imágenes, encabezados, pies de página y muchos más con una variedad de colores de fondo.
To enable cards, add the .card and .card-block classes to an element. There are also some more classes that you can use inside the .card class.
.card-title for heading title
.card-text for the text element
.card-header for the header
.card-footer for the footer
Mira el código a continuación para verlo en acción.

<div class="card">
        <!-- Card Header -->
        <div class="card-header">
            Card Header
        </div>
        <div class="card-block">
            <!-- Card Title -->
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="https://goo.gl/oxHSMr" width="280">
            <!-- Card Text -->
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
        <div class="card-footer">
            Card Footer
        </div>
</div>

El código de arriba tendrá este resultado.

Flexbox

Otra característica opcional agregada en Bootstrap 4 es flexbox. El diseño de caja flexible o flexbox es un nuevo modelo de caja optimizado para el diseño de la interfaz de usuario que funciona con CSS3. Permite la disposición de los elementos en una página para que los elementos “anticipen” cuando se cambia el tamaño del diseño de la página.
Para habitarlo en su proyecto de Bootstrap 4, establezca la variable booleana $enable-flex en true en el archivo variables.scss y después recopile, espere que toda la grilla del diseño de la estructura web pase inmediatamente a usar flexbox para ajustar su sintaxis HTML.
Nota: Flexbox no es compatible con Internet Explorer 9

Tooltip

El plugin tooltip de Bootstrap originalmente fue basado en Jquery.tipsy escrito por Jason Frame. Sin embargo, en Bootstrap 4, paso a Tether, un tercer plugin. Si desea utilizar esta nueva característica, debe incluir tether.js justo antes de bootstrap.js

Conclusión

Bootstrap siempre ha hecho fácil las cosas para los desarrolladores front-end gracias a las actualizaciones y sus nuevas versiones. Ahora bootstrap tiene muchas más características y opciones nuevas para hacer los diseños web aún más fáciles para los desarrolladores y es por eso que las personas están migrando de Bootstrap 3 a Bootstrap 4 ya que es más conveniente y accesible que su su versión anterior.
 
Por último, es posible que desee considerar el uso de un administrador de paquetes para trabajar en su migración. Algo así como una tarea Grunt.js junto con node.js, de modo que cuando ejecuta su sistema de compilación, estos cambios se realizan en tiempo real. Sin embargo, vale la pena señalar que no todos los gestores de paquetes que tienen el Bootstrap 4 alpha todavía no están publicados para su disponibilidad.

 

Calificar

Blogger y Especialista SEO LATAM, me gusta ayudar creando contenidos sobre SEO, Marketing Online y Tendencias Digitales. Trabajo como apoyo en varias agencias SEO & digitales en todo LATAM, como también realizo asesorías y campañas SEO Internacional en Argentina, Colombia, Chile, México, Perú, España y Estados Unidos. Como profesional de SEO & Marketing Online, brindo todo lo mejor para cumplir los objetivos deseados para cada negocio y empresa a través de campañas orgánicas. Sígueme en Twitter @Fotosarnold.

También te puede interesar...
banner hablemos de seo
Suscríbete a Nuestro Newsletter

No te pierdas las últimas actualizaciones sobre SEO y Marketing Online, manténte notificado y entérate todo con las mejores noticias!

Comentarios

Esta entrada tiene 6 comentarios

  1. hola, tengo una pregunta.
    Si tengo Dreamweaver y creo una página nueva con la opción de bootstrap ¿Cómo hago para que el bootstrap se convierta a 3 por que no manejo el 4 para nada? y solo utilizo algunas veces el dreamweaver. Gracias

    1. Hola Jesus, primero gracias por tu comentario. De acuerdo a tu pregunta, no te recomiendo en convertir Bootstrap 3 al Bootstrap 4, ya que tienes que cambiar casi la mayoría de clases obsoleta. Preferible es que te empieces a maquetar bootstrap 4 desde 0 descargando los archivos de bootstrap y empezar a codificar. Saludos¡

  2. Interesante articulo . Aprendo algo con cada web todos los días. Siempre es grato poder leer el contenido de otros bloggers. Desearía usar algo de tu post en mi blog, naturalmente pondré un enlace , si no te importa. Gracias por compartir.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba