Usted está aquí

Qué trae de nuevo Bootstrap 4 (parte 1)

Escrito por Mónica Maya, 09 de Junio, del 2016
Qué trae de nuevo Bootstrap 4 (parte 1)

A finales del 2015 Bootstrap, oficializó el lanzamiento de una nueva actualización, la versión 4. Recientemente se anunció Bootstrap 4 alpha que a pesar de que falta mucha documentación por completar vamos a darle un repaso a sus componentes.

Veamos las principales características:

 

1. De Less a Sass. 

 

En todas las versiones anteriores Bootstrap usaba como preprocesador Less y en la 3.0 introdujo Sass, sin embargo, en esta versión alpha 4 se ha decidido prescindir de Less por ahora y usar solamente Sass como preprocesador css debido a sus características, ligereza y flexibilidad pues compila más rápido que nunca gracias a Libsass.

 

2. Mejoras en el sistema de Rejillas

Aunque parece que el sistema de Grid es el mismo en esta versión hubo renovaciones todo pensando en una mejor experiencia mobile. Se agrega una nueva clase (-SM) para orientar los elementos en diferentes tamaños.

Bootstrap 4, ha dicho adiós a los píxeles. Ahora las unidades que indican el ancho, el margen y el padding de los elementos están en rem (root em), que son unidades relativas.

En la siguiente imagen puedes obtener más información.

 

3. Soporte a Flexbox.

En esta versión podemos decidir si utilizamos las características poderosas de Flexbox.

Flexbox proporciona la alineación del contenido dentro de un elemento principal en posición vertical con columnas iguales en altura por medio de diseños basados en la red.

Para activar esta opción solo bastará con cambiar el valor a “true” de la siguiente variable booleana $enable-flex que se encuentra en el archivo _variables.scss .

 

4. Sin soporte para IExplorer

Si la decisión es seguir dando soporte a las versiones antiguas de Internet Explorer sin duda sigamos usando Bootstrap 3, pero en esta versión todo ha cambiado para bien, por ejemplo, esta versión está basada en jQuery 2.0, también los píxeles fueron cambiados por REMS y EMS medidas relativas que sin duda mejorarán el tema responsive.

Por tal motivo deja de dar soporte a Internet Explorel 8.

 

5. Media queries breakpoints mejorados

Los breakpoints de Bootstrap 4 ahora están en ems, como ya sabrás estos breakpoints se basan en el ancho mínimo de la pantalla de diferentes dispositivos (viewports) y nos ayudan a escalar los elementos de nuestra web según cambie este ancho.

¿Por qué cambiar de píxeles a ems? pues porque el valor que obtiene “em” en Media Queries es relativo al user agent (el navegador que usa el usuario).

Y como novedad tenemos un nuevo breakpoint que cubre el ancho de las pantallas por debajo de 480px, este breakpoint para las pantallas más pequeñas tiene el mismo nombre que en bootstrap 3: col-xs-…

En resumen, los media queries de Bootstrap 4 quedarían así:

Continuará ……

Damonrab
2020-01-03
Seriously plenty of terrific information. fluconazole cream
Damonrab
2020-01-03
With thanks, Plenty of forum posts! diflucan generic
Damonrab
2020-01-04
Wonderful postings, Many thanks! fluconazole 150 mg
Phillipcax
2020-01-10
You've made your position quite clearly.. dutch women viagra
Phillipcax
2020-01-10
You revealed it very well! fda kratom
Tyroneirole
2020-01-10
Thanks! I value it. https://viagradocker.com/
Richardmoisy
2020-01-10
Superb postings, Thank you. canada online pharmacies
Phillipcax
2020-01-10
Kudos. I appreciate this. health canada drug database
Phillipcax
2020-01-10
You actually reported this effectively. Arti Cialis
Richardmoisy
2020-01-10
Awesome info. Thanks a lot! viagra for sale

Páginas