En el cuarto aniversario de Bootstrap (19 de agosto) se publicó la versión de prueba interna de Bootstrap 4. ¡Veamos a continuación qué novedades trae Bootstrap 4!

  • Migración de Less a Sass: Ahora Bootstrap se ha unido a la gran familia de Sass. Gracias a Libsass, la velocidad de compilación de Bootstrap es más rápida que antes;
  • Mejora del sistema de cuadrícula: Se ha añadido una capa de cuadrícula para adaptarse a dispositivos móviles y se han reorganizado los mixins semánticos.
  • Soporte para elegir el modelo de caja flexible (flexbox): Esta es una función innovadora: basta con modificar una variable booleana para aprovechar las ventajas de flexbox y crear diseños rápidamente.
  • Se eliminaron wells, thumbnails y panels, reemplazados por cards: Cards es un concepto completamente nuevo, pero su uso es muy similar al de wells, thumbnails y panels, y además es más conveniente.
  • Todas las hojas de estilo de reinicio de HTML se integran en Reboot: Allí donde no se podía usar Normalize.css, ahora se puede usar Reboot, que ofrece más opciones. Por ejemplobox-sizing: border-box, los ajustes de margen (margin tweaks), etc. se almacenan en un archivo Sass separado.
  • Nuevas opciones de personalización: Ya no es como en la versión anterior, donde los efectos como degradados, fundidos, sombras, etc. se colocaban en hojas de estilo separadas. En cambio, todas las opciones se han movido a una variable Sass. ¿Quieres definir un efecto predeterminado para el ámbito global o para rincones que no habías considerado? Muy sencillo: solo tienes que actualizar el valor de la variable y volver a compilar.
  • Ya no se admite IE8; se utilizan unidades rem y em: Abandonar el soporte para IE8 significa que los desarrolladores pueden aprovechar las ventajas de CSS con tranquilidad, sin necesidad de estudiar trucos de CSS (CSS hacks) ni mecanismos de respaldo. El uso de unidades rem y em en lugar de px es más adecuado para el diseño receptivo y para controlar el tamaño de los componentes. Si necesitas soportar IE8, solo puedes seguir usando Bootstrap 3.
  • Reescritura de todos los plugins de JavaScript: Para aprovechar las nuevas características de JavaScript, Bootstrap 4 reescribió todos los plugins con ES6. Ahora ofrece soporte UMD, métodos genéricos de desestructuración, verificación de tipos de opciones, entre otras características.
  • Mejora del posicionamiento automático de tooltips y popovers: Esto se debe en parte a la ayuda de la herramienta Tether.
  • Mejora de la documentación: Toda la documentación ha sido reescrita en formato Markdown, y se han añadido ejemplos de organización de complementos y fragmentos de código convenientes. La documentación será más fácil de usar, y también se está trabajando en la optimización de la búsqueda.
  • Más cambios: Soporte para controles de formulario personalizados, clases de espaciado (margen y relleno), así como nuevas clases de utilidad, entre otras.

Compatibilidad con v3

Cuando se lanzó Bootstrap 3, Bootstrap abandonó el soporte para la versión 2.x, lo que causó problemas a muchos usuarios. El mismo error no se cometerá dos veces. En un futuro cercano, el equipo de desarrollo continuará corrigiendo errores (bugs) de v3 y mejorando la documentación. Después del lanzamiento final de v4, la documentación de v3 no se retirará.

Además de publicar Bootstrap 4 alpha, el equipo oficial también publicó temas de Bootstrap. Sin embargo, al parecer todos son de pago.

Posteriormente, el Tutorial de novatos continuará siguiendo las novedades de Bootstrap 4. Cuando se publique la versión estable, actualizaremos el tutorial en chino lo antes posible.


Enlaces relacionados

Sitio oficial de Bootstrap 4:http://v4-alpha.getbootstrap.com/

Tutorial de Bootstrap 3:http://www.example.com/bootstrap/bootstrap-tutorial.html

Herramientas en línea de Bootstrap:http://www.example.com/try/bootstrap/layoutit/