Bootstrap 3 vs Bootstrap 4: una descripción general

Bootstrap ha sido el marco front-end de código abierto más confiable para desarrollar sitios web receptivos y móviles. Bootstrap es un marco famoso, ¿por qué? Porque todo lo que requiere es el conocimiento básico de HTML y CSS y podemos construir un sitio web atractivo y funcional mediante el uso de clases predefinidas de arranque que se encargan de la capacidad de respuesta en diferentes dispositivos.

Bootstrap 3 se lanzó en el año 2013 y la última versión estable Bootstrap 3.3.7 se lanzó en julio de 2016. En octubre de 2014, Twitter anunció que Bootstrap 4 estaba en desarrollo. La primera versión alfa de Bootstrap 4 se lanzó en agosto de 2015. Y ahora, en agosto de 2017, se lanzó la versión beta de Bootstrap 4.0.0. Puede consultar este tutorial detallado de Bootstrap si desea comenzar a aprender desde 0.

El centro de atención de esta publicación serán las principales diferencias, adiciones y sustracciones de la versión 3 a la versión 4.0.0-beta recientemente lanzada.

Qué es diferente en la versión 4:

Ahora podemos comenzar a hablar sobre las nuevas características de Bootstrap 4. A medida que la tecnología evoluciona rápidamente, se desarrollan lenguajes más nuevos e inteligentes para hacer que la creación de sitios web limpios y rápidos sea mucho más simple. Tal es el caso de la última versión de Bootstrap. El equipo dice que esta "versión 4 es una reescritura importante de casi todo el proyecto". Vamos a resumir algunos cambios clave de esta mejora.

Cambios globales:

• Se cambió de Less a Sass para los archivos CSS de origen.
• Se cambió de px rem como la unidad CSS principal de Bootstrap, aunque los píxeles todavía se usan para consultas de medios y el comportamiento de la cuadrícula, ya que las ventanas gráficas del dispositivo no se ven afectadas por el tamaño del tipo.
• El tamaño de fuente global aumentó de 14 px a 16 px .
• Se agregó un nuevo nivel de cuadrícula para ~480 px y menos.

Sistema de red:

El mayor paso de Bootstrap 4 hacia la mejora es su movimiento hacia la adopción de Flexbox. Como parte de flexbox, se incluye soporte para clases de alineación vertical y horizontal. Bootstrap 4 pone mucho énfasis en la personalización. Su nuevo sistema de niveles de cuadrícula permite que Bootstrap 4 disfrute de la presencia de hasta 5 niveles de cuadrícula (ejemplo de 5 niveles: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Se puede decir fácilmente que Bootstrap 4 brinda acceso a un sistema de red mejorado.

• Se agregó un nuevo nivel de cuadrícula SM por debajo de 768 px para un control más granular. Ahora hay xs, sm, md, lg y xl. Esto también significa que cada nivel ha subido un nivel (por lo que .col-md-6 en v3 ahora es .col-lg-6 en v4).
• Se cambiaron los puntos de interrupción de consulta de medios del sistema de cuadrícula y los anchos de los contenedores para tener en cuenta el nuevo nivel de cuadrícula y garantizar que las columnas se puedan dividir uniformemente por 12 en su ancho máximo.
• Los puntos de interrupción de la cuadrícula y los anchos de los contenedores ahora se manejan a través de mapas Sass ($grid-breakpoints y $container-max-widths) en lugar de un puñado de variables separadas. Estos reemplazan las variables @screen-* por completo y le permiten personalizar completamente los niveles de la cuadrícula.
• Las consultas de los medios también han cambiado. En lugar de repetir declaraciones de consulta de medios con el mismo valor cada vez, ahora hay @include media-breakpoint-up/down/only. Ahora, en lugar de escribir @media (min-width: @screen-sm-min) { … }, puede escribir @include media-breakpoint-up(sm) { … }.

Soporte del navegador:

• Se eliminó la compatibilidad con IE8 e iOS 6. v4 ahora es solo IE9+ e iOS 7+. Para los sitios que necesitan cualquiera de esos, use v3.

Clases de utilidad:

En Bootstrap 4, se han incluido nuevas clases de utilidades sin obstaculizar ninguna funcionalidad existente, en absoluto. Estas adiciones importantes son las clases de alineación de texto receptivo, flotantes receptivos e incrustaciones receptivas. Además de ofrecer muchos atajos, estos, respectivamente, permiten cambiar la alineación del texto, la flotación de los elementos y la escala de la relación de aspecto de cualquier medio incrustado. (ejemplo: .hidden-md-up oculta un elemento en ventanas medianas, grandes y extragrandes. Ahora, en lugar de .hidden-md-up , use .d-md-none ).

Imágenes:

• Se cambió el nombre .img-responsive a .img-fluid .
• Renombrado .img-rounded a .rounded
• Renombrado .img-circle a .rounded-circle

Mesas:

• Las tablas receptivas ya no requieren un elemento envolvente. En palabras simples, en Bootstrap 3, la clase .table-responsive debe agregarse al elemento principal <div>. Pero en Bootstrap 4, la clase .table-responsive se agregará al elemento <table> .
• Se agregó una nueva opción .table-inverse .
• Se agregaron modificadores de encabezado de tabla: .thead-default y. .thead-inverse
• Clases contextuales renombradas para tener un .table- . Por lo tanto, .active .success , .warning , .danger y .table-info a .table-active , .table-success , .table-warning , .table-danger y .table-info.

Navegación:

En Bootstrap 4, el componente de navegación se ha simplificado en gran medida. Se requiere uno para crear una nueva lista de elementos que empleen la última clase base de navegación. Hay algunas adiciones recientes como clase de enlace de navegación, clase de elemento de navegación y estilos de barra de navegación también.

• Componente reescrito con flexbox.
• .navbar-default ahora es .navbar-light , aunque .navbar-dark sigue siendo el mismo. Sin embargo, estas clases ya no establecen background-color s; en cambio, esencialmente solo afectan color .
• .navbar-toggle ahora es .navbar-toggler y tiene diferentes estilos y marcas internas (no más tres <span> s).
• Se eliminó por completo la clase .navbar-form . Ya no es necesario; en su lugar, simplemente use .form-inline y aplique utilidades de margen según sea necesario.
• Las barras de navegación ya no incluyen margin-bottom o border-radius de forma predeterminada.

Una tabla de comparación de Bootstrap versión 3 y versión 4

Como ya dijimos, el equipo de Bootstrap ha reescrito el marco. Entonces, los cambios anteriores son solo cambios clave que escribimos aquí. Para leer en profundidad, siga el enlace Bootstrap 4.

¿Deberíamos migrar a Bootstrap 4 o permanecer en Bootstrap 3?

Hemos hablado de las características que ofrece Bootstrap 4. Podemos ver que se ha trabajado mucho en la optimización y limpieza de elementos y clases innecesarios en todo el marco. Bootstrap 4 promete ser mucho más rápido y optimizado para una mayor flexibilidad y facilidad al crear un sitio web increíble para dispositivos móviles.

Bootstrap 4, movido a flexbox. Esto puede considerarse como uno de los logros más grandes y significativos. Esto proporcionará los siguientes beneficios:

• Cuadrícula basada en Flexbox
• Nuevo nivel de cuadrícula XLl
• Última cuadrícula de diseño automático
• Opciones de personalización de la barra de navegación
• Nuevas utilidades de espaciado
• Configuración de Sans Glyphicons (zona libre de hinchazón)
• Tamaño sensible
• Flotadores receptivos
• Márgenes automáticos
• Centrado vertical

Conclusión

Bootstrap siempre ha estado facilitando la vida de los desarrolladores y, gracias a la actualización de la versión, ahora Bootstrap tiene muchas más funciones y opciones nuevas para facilitar aún más las cosas a 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 contraparte anterior.