¡Bootstrap 4 Está Aquí! ¿Qué hay de nuevo?

() translation by (you can also view the original English article)

Bootstrap, uno de los marcos de trabajo front-end más populares entre diseñadores web, ¡recientemente lanzó su muy esperada versión 4! Echemos un vistazo a las novedades, qué ha sido removido, y lo que puedes hacer con él.

Nunca dejamos de creer, ¡y esperamos que tú tampoco! ¡Bootstrap 4.0 finalmente aterrizó! https://t.co/zFAOxpyhvD
— Bootstrap (@getbootstrap) Enero 18, 2018

Versión 4.0.0

Esta iteración de Bootstrap, de acuerdo a Mark Otto y el equipo, es una “Reescritura mayor del proyecto entero”. Eso promete muchas mejoras, y también sugiere que hay mucho que entender si estás planeando migrar proyectos existentes a esta nueva versión. No hay “cambios de última hora”, pero hay mucho que abarcar. Tiempo de saltar y examinar las características más importantes.

¡Bootstrap 4 Está Aquí!

1. Nuevo: Flexbox por Defecto

La retícula de Bootstrap ha sido motorizada tradicionalmente por estilos basados en flotación. En versiones recientes un flexbox alternativo estaba disponible, pero debido a su amplio soporte de navegador flexbox es ahora el maestro de las cuadrículas Bootstrap. La tecnología CSS detrás de las cuadrículas Bootstrap no hace una gran diferencia, pero flexbox ofrece más flexibilidad que los flotados, así que las cuadrículas basadas en flexbox vienen con unas cuántas opciones más. Por ejemplo, usar flexbox significa que puedes definir una columna y que sus hermanos se redimensionen de manera automática alrededor de este.

2. Nuevo: Soporte Concentrado de Navegador

El movimiento hacia favorecer flexbox de hecho incitó otro cambio: soporte de navegador. Bootstrap v4 ha desechado oficialmente el soporte para Internet Explorer 8, 9, y iOS 6. Esto significa efectivamente que tus sitios Bootstrap solo estarán soportando IE10+ y iOS7+. Vale la pena tomar nota.

3. Nuevo: LESS a Sass

Los fanáticos de Sass estarán contentos de escuchar que Bootstrap es ahora oficialmente un proyecto primero-Sass. Si descargas la fuente Bootstrap encontrarás una carpeta llamada “Sass” en la cual verás todos los parciales necesarios. “_variables.scss” contiene todas las variables y ajustes que necesitarás, después “bootstrap.scss” alberga todas las directivas @import, permitiéndote personalizar tu instalación Bootstrap incluyendo o excluyendo cualquier componente que desees.

4. Nuevo: REM

En todos los lugares aparte de los media queries, Bootstrap v4 ha desechado los pixeles en favor de unidades relativas de medida como rems. Esto hace que todo sea más escalable, así que si aún no te has acostumbrado a usar unidades rem ahora sería un gran momento para echar un vistazo a estos recursos:

5. Nuevo: Nivel de Rompimiento Adicional

Además del alejamiento de Bootstrap de las retículas basadas en flotaciones, su responsividad ahora viene también con un nivel extra. Desde ahora, podrás personalizar estos cinco valores por defecto:

1	$grid-breakpoints: (
2	xs: 0px,
3	sm: 576px,
4	md: 768px,
5	lg: 992px,
6	xl: 1200px
7	) !default;

6. Nuevo: Reinicio

El siguiente cambio notable viene en la forma de un nuevo archivo de reinicio. “Reinicio” toma los reinicios de Normalize, el cuál usa únicamente selectores de elemento., después construye sobre este con algunos estilos de reinicio (encontrarás .table y .table-bordered enterrados ahí con muchos otros).

7. Desechado: Constructor Personalizado

Si alguna vez descargaste una versión anterior de Bootstrap estarás familiarizado con el personalizador en línea. Esta herramienta te permitía marcar y desmarcar varios aspectos del marco de trabajo Bootstrap para poder crear tu versión ideal.

Bueno, se ha ido.

En su lugar, Bootstrap ahora se centra en su propia estructura modular, permitiéndote sacar provecho de Sass desde tu lado, incluye solo lo que necesitas, y compila tu propio resultado final desplegable.

8. Desechado: Glyphicons

Bootstrap ya no incluye Glyphicons. En su lugar, se te recomiendo que encuentres tus favoritos y los incluyas en cualquier modo que veas conveniente. El equipo de Bootstrap mismo prefiere los siguientes conjuntos, los cuales te recomendamos implementar como SVG en vez de usar iconos de fuente web:

Iconics thumbs-up — Pulgar arriba de Iconic

9. Desechado: Grunt

Versiones anteriores de Bootstrap incluían soporte Grunt para automatizar muchas de las tareas comunes; eso se ha ido. En su lugar, Bootstrap ahora viene con un montón de scripts npm que podrás encontrar en el archivo “package.json”. Puedes usar estos hacer cosas como vigilar cambios de tus archivos Sass, hacer pruebas de hilas en tu JavaScript, o solo usar run npm dist para hacer todo y compilar una versión de distribución de tu sitio web terminado.

Para más detalles sobre cómo Bootstrap y Node.js funcionan echa un vistazo a los documentos de herramientas de construcción, o revisa los siguientes tutoriales:

Conclusión

Junto con estos cambios mayores, hay un número de cambios menores al último Bootstrap. Los fanáticos de componentes como paneles, viñetas, y pozos estarán decepcionados de saber que estos han sido removidos. Sin embargo, han abierto camino para un componente llamado la “tarjeta”, el cuál es de hecho una gran mejora. Puedes leer todo sobre estos cambios, y más, en la página de Migración.

Mantente en sintonía para más cursos y tutoriales Bootstrap 4 en Tuts+, ¡y te veré la próxima vez!

Recursos Útiles

Anuncio de Bootstrap 4 en el blog Bootstrap
getbootstrap.com
Documentos de migración