Bootstrap 4 características nuevas y geniales que te encantarán

La próxima versión importante del marco de Bootstrap está a la vuelta de la esquina. La versión alfa ya se puede descargar del sitio web de desarrollo de Bootstrap, y el código fuente también está disponible en Github.

Twitter Bootstrap es actualmente el marco de frontend más popular que existe. Permite a los desarrolladores crear sitios web móviles y de respuesta rápida, rápidamente. Bootstrap hace posible el uso inteligente de HTML5, CSS3 y Javascript trío frontend estándar. Actualmente es utilizado por más de 6 millones de sitios en la web..

Aunque Bootstrap 4 aún está en la fase de desarrollo (así que no lo use en un sitio en vivo todavía), los desarrolladores han hecho un trabajo fabuloso. En esta publicación, echaremos un vistazo a la nueva versión que incluye muchas características excelentes que seguramente agilizar y mejorar el flujo de trabajo de desarrollo frontend.

1. Sass en lugar de MENOS

Hasta ahora, Bootstrap ha usado LESS como su principal preprocesador de CSS, pero para la nueva versión principal, las reglas de estilo serán refactadas a Sass, que es mucho más popular entre los desarrolladores frontend, tiene una gran base de colaboradores, generalmente más fácil de usar y ofrece más. posibilidades Gracias al poderoso Libsass Sass Complier escrito en C / C++ Bootstrap 4 compilará mucho más rápido que antes.

2. Nuevo Grid Tier para pantallas más pequeñas

Bootstrap tiene un sofisticado sistema de cuadrícula sensible que permite a los desarrolladores apuntar a dispositivos con diferentes vistas. Bootstrap 3 tiene actualmente 4 clases de grilla para columnas, .col-xs-XX para telefonos moviles, .col-sm-XX para tabletas, .col-md-XX para escritorios, y .col-lg-XX Para escritorios más grandes. Bootstrap 4 mejorará el sistema de cuadrícula con un quinto que facilitará a los desarrolladores Apunte a dispositivos más pequeños con un ancho de ventana de 480px.

La nueva clase de cuadrícula ha tomado el nombre de la anterior más pequeña y ha empujado los nombres actuales de los niveles de cuadrícula hacia arriba una muesca. En Bootstrap 4 los escritorios grandes usarán el .col-xl-XX selector de clase. Es importante saber que, a pesar del nuevo nombre, no agregaron una nueva clase para pantallas extra grandes, sino para las más pequeñas..

3. Presenta Unidades CSS relativas

Bootstrap 4 finalmente elimina el soporte para Internet Explorer 8. Eso es realmente un paso inteligente, ya que les permite deshacerse de los molestos rellenos automáticos y convertirlos en unidades de CSS relativas. En lugar de píxeles, la nueva versión principal será usar REMs y EMs que hacen posible implementar tipografía responsiva en los sitios de Bootstrap. Esto también aumentará la legibilidad y hará que los sitios sean más accesibles para usuarios discapacitados..

Si desea probar cómo funcionan las unidades relativas con el nuevo Bootstrap 4, vea esta demostración en Codepen.

4. Nuevas tarjetas de Bootstrap

El equipo de desarrollo decidió unificar algunos elementos anteriores de la interfaz de usuario de Bootstrap, por lo que decidieron introducir un nuevo componente de la interfaz de usuario llamado Tarjetas. Las tarjetas reemplazarán a los pozos, miniaturas y paneles anteriores, y brindarán a los usuarios un flujo de trabajo más ágil. No se preocupe, las tarjetas mantendrán elementos familiares, como títulos, encabezados y pies de página de pozos, miniaturas y paneles..

Como las tarjetas serán más flexibles que los componentes actuales de la interfaz de usuario, permitirán un mayor espacio para implementaciones creativas. Hay algunos pioneros que ya han realizado experimentos en Codepen con Bootstrap Cards. Puedes consultarlos o crear tus propias tarjetas..

5. Nuevo módulo de reinicio

El nuevo módulo de reinicio reemplaza al anterior normalize.css restablecer el archivo. No lo abandona; por el contrario, construye más reglas sobre él. El objetivo del movimiento era incluir todos los selectores genéricos de CSS y restablecer los estilos en un archivo SCSS único y fácil de usar. Puede consultar el código fuente aquí si desea comprender mejor cómo funciona el nuevo módulo..

Es bueno saber que los nuevos estilos de restablecimiento configuran inteligentemente la propiedad CSS de tamaño de caja casillero sobre el elemento, que por lo tanto es heredado por cada elemento secundario en la página. La nueva regla de estilo. hace que los diseños sensibles sean más manejables. Si desea experimentar la diferencia entre los tipos de diseño de cuadro de contenido y cuadro de borde, eche un vistazo a esta útil demostración proporcionada por CSS-Tricks.com (no fue creada para Bootstrap 4, solo muestra cómo dimensionar el cuadro generalmente funciona).

6. Opt-in Flexbox Support

Sin embargo, Bootstrap 4 permite aprovechar el diseño Flexbox Layout de CSS3, ya que Internet Explorer 9 no es compatible con el módulo Flexbox, la versión predeterminada de Bootstrap 4 hace uso de las propiedades CSS flotantes y de visualización para implementar un diseño fluido.

Flexbox tiene un diseño fácil de usar que se puede utilizar de manera excelente en un diseño responsivo, ya que proporciona un contenedor flexible que se expande o se reduce para llenar el espacio disponible de la mejor manera. Utilice solo la función de flexbox opt-in si no hacer necesidad de proporcionar soporte para IE9.

7. Personalización de variables simplificadas

Todas las variables Sass utilizadas en la nueva versión de Bootstrap se incluyen en un solo archivo llamado _variables.scss, que agilizará significativamente el proceso de desarrollo. No tiene que hacer nada más aparte de copiar la configuración de este archivo en otro llamado _custom.scss para cambiar los valores por defecto.

Usted puede personalizar muchas cosas como colores, espaciado, estilos de enlace, tipografía, tablas, puntos de corte y contenedores de la cuadrícula, número de columna y ancho de canal, y muchos otros.

8. Nuevas clases de utilidad para el espaciado

Bootstrap 3 ya tiene muchas clases de utilidades prácticas, como las que cambian de forma flotante o el clearfix, pero Bootstrap 4 agrega aún más. los nuevas clases de espaciamiento Permite a los desarrolladores cambiar rápidamente los rellenos y los márgenes en sus sitios.

La sintaxis de las nuevas clases es bastante sencilla, por ejemplo, al agregar el .clase m-a-0 vincula una regla de estilo que establece márgenes en 0 en todos los lados del elemento dado (margen-todo-0). Mientras que los márgenes usan el metro- prefijo, los rellenos están diseñados con el pag- prefijo. En los documentos de desarrollo puede ver todas las nuevas clases de utilidad de espaciado.

9. Información sobre herramientas y ventanas emergentes activadas por atadura

En Bootstrap 4, la información sobre herramientas y los elementos emergentes hacen uso de la biblioteca Tether de Supercool, un motor de posicionamiento que hace posible mantener un elemento con una posición absoluta justo al lado de otro elemento en la misma página. Esto significa tooltips y popovers. se colocará automáticamente correctamente en Bootstrap 4 sitios web.

No olvide que dado que Tether es una biblioteca de JavaScript de terceros, debe incluirla por separado en el HTML antes de su archivo bootstrap.js.

10. Complementos JavaScript Refactored

El equipo de desarrollo rediseñó cada complemento de JavaScript para la nueva versión utilizando EcmaScript 6. Con la utilización inteligente de las últimas especificaciones y las mejoras más recientes, pretenden mejorar la experiencia de frontend.

El nuevo Bootstrap 4 también se ha sometido a otras mejoras de JavaScript, como comprobación del tipo de opción, métodos genéricos de desmontaje, y Soporte UMD, que trabajarán todos juntos para hacer que el marco de frontend más popular se ejecute más fácilmente que nunca.

Ahora lea: 10 alternativas ligeras a Bootstrap & Foundation