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á ……

XEvilBestOpite
2018-11-28
Incredible update of captcha solving package "XEvil 4.0": captcha solution of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex, and more than 8400 another size-types of captchas, with highest precision (80..100%) and highest speed (100 img per second). You can use XEvil 4.0 with any most popular SEO/SMM software: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software. Interested? There are a lot of demo videos about XEvil in YouTube. FREE DEMO AVAILABLE! See you later ;) http://XEvil.net/
XEvilBestOpite
2018-12-05
Absolutely NEW update of captcha recognition software "XRumer 16.0 + XEvil": captcha breaking of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex, and more than 8400 another subtypes of captchas, with highest precision (80..100%) and highest speed (100 img per second). You can use XEvil 4.0 with any most popular SEO/SMM programms: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software. Interested? You can find a lot of introducing videos about XEvil in YouTube. FREE DEMO AVAILABLE! Good luck! http://XEvil.net/
osiigip
2019-04-06
d3d3LmxvbWJhb2VzdHVkaW9zLmNvbQ## okzbexub-a.anchor.com [URL=http://theprettyguineapig.com/generic-cialis/#okzbexub-u]okzbexub-u.anchor.com[/URL] http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t http://theprettyguineapig.com/generic-cialis/#okzbexub-t ehevaca
awukohso
2019-04-06
d3d3LmxvbWJhb2VzdHVkaW9zLmNvbQ## igejiu-a.anchor.com [URL=http://theprettyguineapig.com/generic-cialis/#igejiu-u]igejiu-u.anchor.com[/URL] http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t http://theprettyguineapig.com/generic-cialis/#igejiu-t euseceq
ebabofaqo
2019-04-06
d3d3LmxvbWJhb2VzdHVkaW9zLmNvbQ## agivuf-a.anchor.com [URL=http://theprettyguineapig.com/generic-cialis/#agivuf-u]agivuf-u.anchor.com[/URL] http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t http://theprettyguineapig.com/generic-cialis/#agivuf-t uaxaza
idevej
2019-04-06
d3d3LmxvbWJhb2VzdHVkaW9zLmNvbQ## afoovixib-a.anchor.com [URL=http://theprettyguineapig.com/generic-cialis/#afoovixib-u]afoovixib-u.anchor.com[/URL] http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t http://theprettyguineapig.com/generic-cialis/#afoovixib-t ezonatao
Damonrab
2020-01-03
Very good knowledge. Regards! fluconazol 150 mg
Damonrab
2020-01-03
With thanks, Great stuff! fluconazole medication
Damonrab
2020-01-03
Cheers, Excellent stuff. fluconazole cream
Damonrab
2020-01-03
You said it superbly! fluconazole medication

Páginas