Aunque aún no tenemos fecha concreta para el lanzamiento oficial de esta nueva versión (http://v4-alpha.getbootstrap.
1. Fin de Less para centrarse en Sass.
Bootstrap ahora compila mucho más rápido gracias a la potente librería Libsass, prescindiendo totalmente de Less.
Ya en su versión 3.0 introdujo Sass, preprocesador que ha ido, cada vez más, ganando popularidad entre desarrolladores.
2. Mejoras en su sistema de retículas (grid) usando la unidad rem.
Aunque la síntaxis y la semántica en HTML son la misma, Bootstrap deja a un lado los píxeles para centrarse en la unidad relativa rem (root em) calculando los tamaños en función al elemento raiz, el html.
Ahora las unidades que indican propiedades como el ancho, el margen o el padding de cada elemento están en rem (root em).
Por ejemplo, si indicamos que el elemento raiz tenga 12 píxeles para las fuentes:
html {font-size:12px}
Esta unidad (12px) equivaldría a 1rem, por lo que el resto iría en función de dicha medida.
h1 {font-size:3rem} = h1 {font-size:36px}
De esta forma, solo sería necesario modificar el valor de la fuente del html {} para que el resto se ajuste proporcionalmente.
Ejemplo: http://codepen.io/
3. Flexbox al poder.
Ahora los elementos ajustan su altura automáticamente sin importar su contenido a todos los dispositivos. Esta característica no es compatible con IE9 pero tienes la opción de activarla y desactivarla cambiando su variable boleana a “true” en el fichero _variables.scss y recompilar el CSS. Con solo esto, todos los componentes pasan a ser flexbox.
4. Bootstrap Cards.
La nueva versión de bootstrap integra nativamente los paneles contenedores para tarjetas, definidas como “contenedores de contenidos flexibles y extensibles. Incluyendo opciones para headers y footers, y una gran variedad de contenidos, colores de fondo según el contexto y potentes opciones de visualización”.
5. Consolidando todo nuestro HTML reset en un nuevo módulo, Reboot.
Este módulo sustituye a Normalize.css, permitiendo tener todos los selectores genéricos y estilos reseteados en un mismo fichero scss.
Además, ahora se aplica el estilo box-sizing:border-box a todos los elementos desde la raiz, lo que nos evitará muchos quebraderos de cabeza a la hora de ajustar los width con los padding.
html {
box-sizing: border-box;
}
6. Incorporación de nuevas clases.
Bootstrap 4 nos brinda la posibilidad de añadir elementos como paddig o margin a nuestro html mediante la siguiente sintaxis
m (margin) or p (padding) – direction – size
Para indicar la dirección de un elemento:
a (todo) – t (top) – r (right) – l (left) – x (left + right) – y (top + bottom)
Para el tamaño:
0 (cero) – auto (automático) – md (mediano) – lg (largo)
Por ejemplo:
<div class=”col-sm-12 m-b-lg”>
Indicamos una columna al 100% con un margin bottom grande
</div>
7. Adiós a IE8.
No hay mayor pesadilla para un desarrollador que IE8. Bootstrap 4 definitivamente olvida esta versión para seguir adelante y centrarse en las animaciones, transiciones y otros efectos ofrecidos por CSS3.
8. Javascript reescrito en ES6
Todos los plungins se han pasado a JavaScript 6 / EcmaScript6(ES6). Con ello se pretende aprovechar las nuevas mejoras y ventajas de JavaScript, obteniendo un mayor rendimiento.
9. Mejoras en los Tooltips.
La incorporación de la librería Tether, basada en javascript, nos permite la mejor autocolación entre los elementos y mejoras en sus relaciones y funciones. Más info. http://github.hubspot.com/
10. Olvidando Glyphicons.
Adios a los iconos de Glyphicons para dar paso a la librería de iconos Font Awesome. Enlazar ahttps://fortawesome.github.io/
